vue动态绑定img标签的src地址
2024-08-31 15:06:00
问题代码:
<li v-for="(item,index) in images" :key="index">
<img :src="item.src"></li>
如果使用vue-lazyloader加载那就是:
<img v-lazy="item.src"></li>
以上代码会出现控制台会报错404的的错误,原因如下:
摘自:https://blog.csdn.net/mr_yanyan/article/details/78783091
在webpack中会将图片图片来当做模块来用,因为是动态加载的,所以url-loader将无法解析图片地址,然后npm run dev 或者npm run build之后导致路径没有被加工。
解决方法:加个require()
摘自:https://blog.csdn.net/qq_39313596/article/details/84644500
<img :src="require('../assets/images/'+imgsrc+'.png')"/>
<img v-lazy="require('../assets/images/'+imgsrc+'.png')"/>
注意:require(../assets/images/)这部分是把整个images文件夹都加载进来了,没有用到的图片也会被加载进来。不知道会不会影响页面加载速度。
自己另外建立了一个文件夹放动态加载的图片。
最新文章
- Linux C select函数详解
- web页面隐藏鼠标
- HeadFirst Jsp 04 (请求和响应作为servlet)
- python质量控制
- hdu1003 最大连续子序和
- ubuntu/linux mint 创建proc文件的三种方法(四)
- 空连接ipc$入侵
- PHP函数 mysql_real_escape_string 与 addslashes 的区别
- PAT A1059
- Java虚拟机对象存活标记及垃圾收集算法解析
- SeaJS:一个适用于 Web 浏览器端的模块加载器
- Mathematica绘制曲面交线方法(方法二)
- Struts 2 初步入门(三)
- MySQL中正则表达式
- [转]BSIM Parameters
- LeetCode: Binary Tree Maximum Path Sum 解题报告
- 使用socket发送http请求(get/post)
- Python完成RF测试用例
- ZOJ3696 Alien&#39;s Organ 2017-04-06 23:16 51人阅读 评论(0) 收藏
- 漫游Kafka设计篇之消息传输的事务定义(5)