解决vue3绑定动态本地图片时require无法使用问题_vue3 img require

背景

在vue2.x中，我们使用img标签时，绑定动态src可以按照以下写法实现

// 单张图片
<img :src="require('@/assets/img/a.png')" />
// 多张图片(根据索引遍历)
<img :src="require('@/assets/'+index+'.png')" />
1
2
3
4

问题

以上方法用到了require，但是在vue3中使用require会报错，所以我们需要另辟蹊径

解决办法

在单张图片引用时，我们可以使用import 当作变量引入图片路径；当多张图片遍历使用时，我们可以用computed接收index并将本地地址前面拼接上网页地址，就可以访问了，注意使用这种方法时不可以使用@/src路径简写方式

// 单张图片
import img from '@/assets/img/a.png'
<img :src="img" />
// 多张图片(根据索引遍历)
<img :src="imgUrl(index)"/>
const imgUrl=computed(()=>url=>new URL(`../../assets/img/${url}.png`,import.meta.url).href)
1
2
3
4
5
6