在vue项目中动态的引用本地图片

<img src="xxxxxx/xx/xx.jpg"/>

这是一般写法，但是只能引用相对路径下的图片

如果引用的是本地绝对路径的图片，一般需要使用require()方式，当然require()也适用于相对路径

<img src="require("../../xxxx/xx.jpg")"/>

<img :src="imgURL"/>

imgURL: require('xxx/xx/xx.jpg'); 

以上方式对于指定的图片有效，如果图片的名称不确定，则使用以下方式

require ()不接受变量，所以不可以动态赋值，但可以使用占位符（注意是反引号！！！）

<img :scr="require(`../../static/xxx/${imgName}.jpg`)"/>

当然，这种方式仅适用于相对路径下的图片

如果需要使用的是本地图片，并且图片名称是无法事先确定的

将本地图片先转为base64图片，然后就阔以辽~

<img :src="'data:image/jpg;' + 'base64,' + imgName" />
// 这里的imgName即base64编码

亲测有效

（手动狗头） 告辞