vue动态绑定img标签的src地址
问题代码:
<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文件夹都加载进来了,没有用到的图片也会被加载进来。不知道会不会影响页面加载速度。
自己另外建立了一个文件夹放动态加载的图片。
vue动态绑定img标签的src地址的更多相关文章
- C#正则表达式提取HTML中IMG标签的SRC地址(转)
一般来说一个 HTML 文档有很多标签,比如“<html>”.“<body>”.“<table>”等,想把文档中的 img 标签提取出来并不是一件容易的事.由于 i ...
- C#正则表达式提取HTML中IMG标签的SRC地址
一般来说一个 HTML 文档有很多标签,比如“<html>”.“<body>”.“<table>”等,想把文档中的 img 标签提取出来并不是一件容易的事.由于 i ...
- 正则表达式提取HTML中img标签的src地址
一般来说一个 HTML 文档有很多标签,比如“”.“”.“”等, 想把文档中的 img 标签提取出来并不是一件容易的事. 由于 img 标签样式变化多端,使提取的时候用程序寻找并不容易. 于是想要寻找 ...
- Vue.js自定义标签属性并获取属性,及绑定img的src属性的坑
一.定义属性: 一般定义属性都是为了动态的去获取属性的值,或者动态的设置属性的值,如果想仅仅是设置一个普通的属性,直接在便签上设置属性即可,就像使用html的title.name等属性一样,如< ...
- Vue系列——动态设置img标签的src属性
声明 本文转自:vue动态设置img的src路径 正文 相信开发的小伙伴已经遇到这个问题了,动态切换img标签的src时,写的路径就是不生效,原因是vue并没有把你的路径字符串当做路径来处理,而是直接 ...
- 正则获取HTML代码中img的src地址
/// <summary> /// 获得HTML中所有图片的src地址 /// </summary> /// <param name="sHtmlText&qu ...
- 第四节:Vue表单标签和组件的基本用法,父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- 如何提取HTML代码中img的src地址?
答案:专门的代码 使用专门的正则表达式 /// <summary> /// 获得HTML中所有图片的src地址[比较稳定的一个版本] /// </summary> /// &l ...
- HTML <frame> 标签的 src 属性
HTML <frame> 标签 实例 src 属性规定在框架中显示的文档的位置: <html> <frameset cols="50%,50%"> ...
随机推荐
- 138.安全退出的异常,要用throw 尽量不用exit(0)
#include<iostream> #include<cstdlib> using namespace std; ////非安全退出,结束进程, //C++ 必须释放对象,最 ...
- ASP页面的执行顺序
http://hi.baidu.com/yanjiezhu/item/29c113c3912e2a0ac710b2d3 1.对象初始化(OnInit方法) 页面中的控件(包括页面本身)都是在它们最初的 ...
- C++之指针与引用,函数和数组
]={,,}; //ptr是指针,该指针类型是int[3] ]=&arr; cout << **ptr << endl;//第一次解指针时得到数组地址,第二次解指针取数 ...
- rem 、em
介绍:rem是相对字体单位:根据html根元素大小而定,同样可作为宽高等单位: 适配原理:将px替换成rem,采用rem适配移动web的原理,根据不同屏幕宽度设置html的font-size的大小: ...
- 你不知道的JavaScript(八)逻辑运算
JS的逻辑运算结果和其他一些强类型语言差别比较大,也比较容易让人产生困惑,看下面的例子: <script type="text/javascript"> var a = ...
- 使用Java开发高性能网站需要关注的那些事儿2
近期各家IT媒体举办的业内技术大会让很多网站都在披露自己的技术内幕与同行们分享,大到facebook,百度,小到刚起步的网站.facebook,百度之类的大型网站采用的技术和超凡的处理能力的确给人 ...
- POJ 3264 Balanced Lineup【线段树】
题意:给出n个数,a1,a2,a3,---,an,再给出q次询问区间al到ar之间的最大值和最小值的差 学习线段树的第一道题目 学习的这一篇 http://www.cnblogs.com/kuangb ...
- php获取当前月份的前(后)几个月
//获取当前月份的前一月 function GetMonth($sign) { //得到系统的年月 $tmp_date=date("Ym"); //切割出年份 $tmp_year= ...
- Vim常用命令及配置方案
Vim常用命令及配置方案 几句话 很久之前就接触到vim,初学那阵觉得vim很酷炫,但确实对新手不是很友好.我也就简单看了下基本操作就上手了,但又不是长期在vim下工作,这就导致了每一次重新使用v ...
- Linux Shell脚本编程-信号捕获
bash编程的信号捕获: kill -l 显示当前系统可用信号(trap -l) 获取帮助:man 7 single 常用信号: 1) SIGHUP 无须重启进程而让其重读配置文件 2) SI ...