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

本文介绍了在Vue组件中使用v-for循环渲染从import...from导入的.js文件中数组数据时,图片无法正常显示的问题。通过在图片路径前添加require关键字解决了图片加载失败的问题,但作者对这一机制的原理仍不清楚,欢迎读者留言讨论。
摘要由CSDN通过智能技术生成

1、问题描述

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

2、解决办法

浏览了一些技术博文后我尝试在B文件中的图片路径属性字符串加上require(“url”),最后页面的图片就正常显示啦!
注意不能将require包到字符串中!
在图片的url前加上require
我还不清楚这里面的机制,如果有哪位看官清楚这个问题的原因请在留言区轰炸,谢谢啦!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值