Vue中如何使用动态绑定方式使用静态图片？

方法1（不推荐）：

将图片放到public目录下，即可以正常使用。

方法2（推荐）：

不妨建立common文件夹，然后建立common.js文件，写个函数，如下：

export const getAssetsImages = (name) => {
  return new URL(`/src/assets/image/${name}`, import.meta.url).href;
};

图片放在src/assets/image文件夹里，在使用的地方使用：

import { getAssetsImages } from '@/common/common.js';
 
const imgList = reactive([
  { id: '1', url: getAssetsImages('1.png') },
  { id: '2', url: getAssetsImages('2.png') },
  { id: '3', url: getAssetsImages('3.png') }
]);