vue中v-for循环一个import...from...另一个JS文件中的数组数据动态加载图片(:src)失败的解决方法

1、问题描述

我在A组件中使用vue中的v-for循环渲染一个使用import…from…引入的一个名为B的.js文件中的数组(元素是对象格式),对象中的属性中含有图片的URL地址,但是在img标签中(:src=“item.picture”)最后页面中图片并没有被加载出来,并且在控制台中看到只是一个空的vue中v-for循环一个import...from...另一个JS文件中的数组数据动态加载图片(:src)失败的解决方法标签,其中并没有src属性以及相应的url.
vue中v-for循环一个import...from...另一个JS文件中的数组数据动态加载图片(:src)失败的解决方法
vue中v-for循环一个import...from...另一个JS文件中的数组数据动态加载图片(:src)失败的解决方法
vue中v-for循环一个import...from...另一个JS文件中的数组数据动态加载图片(:src)失败的解决方法
到最后发现是页面上是没有相关图片的,我已经确定了图片路径是正确的。

2、解决办法

浏览了一些技术博文后我尝试在B文件中的图片路径属性字符串加上require(“url”),最后页面的图片就正常显示啦!
注意不能将require包到字符串中!
vue中v-for循环一个import...from...另一个JS文件中的数组数据动态加载图片(:src)失败的解决方法
我还不清楚这里面的机制,如果有哪位看官清楚这个问题的原因请在留言区轰炸,谢谢啦!