最近遇到一个问题。我用v-bind动态绑定img的src，图片无法加载。控制台显示src获得了图片地址，但就是无法加载。

最后，人们发现原因是。/img/img1.png '直接显示在浏览器中，也就是说，采集的数据直接显示为字符串，无需编译。

解决方法：

1.在当前界面中全局导入图片地址

//使用import从“”导入img1。/img/img1.png“从导入img2”。/img/img 2 . png ' export default { data(){ return { imglist[{ id : 0，Imgurl:img1 }，{id:1，imgurl3360 img 2 }]} }在Html中使用

img v-for=' imglist ' :键中的项目='项目。id' : src=' http : imgur'/2。使用要求

使用第一种方法可能非常麻烦。当有大量数据时，很难逐个导入。此时，它会动态加载require

Getimage () {this。imglist。foreach (item={item。imgur=require('。/img/'项。名字。png')})}数据中的数据(无需导入此方法)

data(){ return { imglist[{ ID : 0，Name :' img1 '，Imgurl3360''}，{ID : 1，Name :' img2 '，Imgurl3360''}]以上方法可以解决动态绑定后图片无法显示的问题

摘要

以上就是边肖介绍的Vue动态加载本地图片问题的解决方案，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！