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%"> ...
随机推荐
- 移动端video播放时不弹出页面层
移动端视频在播放时会主动弹出页面,有的浏览器不会.对那些会的浏览器进行处理: 直接加上下面三个属性即可,兼容方面就不说了,微信上是很ok的. <video x5-playsinline=&quo ...
- Win10运行在哪里,Win10的运行怎么打开
方法/步骤 1 唯一的方法是同时按下WIN+X键组合,如下图所示 步骤阅读 2 在弹出菜单可以看到运行了!如下图所示 步骤阅读 3 运行对话框出来了,如下图所示 步骤阅读 4 还有一个方法,点击桌面左 ...
- STM8S103 STVD编译空间不足
关于text空间(理解为代码空间)不足问题 # 关于.bsct和.ubsct问题(着重参考http://www.waveshare.net/article/STM8-3-1-10.htm) map文件 ...
- vmware workstation中的NAT配置
宿主机:win10: IP:192.168.1.101 GW:192.168.1.1 以太网2(VMNET8) IP:192.168.100.1 GW:nonevmware中的虚拟网络设置(NAT): ...
- ajax返回数据时,如何将javascript值(通常为对象或数组)转为json字符串
ajax获取值时,返回的数据为空时 alert后出现 [ ]; 用if语句判断时不为空,此时如何判断返回的数据是否为空.可将返回的值转化为json字符串. JSON.stringify() 方法用于将 ...
- ZBrush功能特性之变形
使用ZBrush内置的变形功能可以让用户对三维网格轻松应用扭曲.拉伸.弯曲及其他各种变化.在ZBrush当中,有超过20种的强大变形类型,可以应用于任何轴向.用户只需单击几次即可创造出高级形状,如图所 ...
- jQuery更改样式
$(".input_check_2").css("left","31px"); //更改left的值
- windows下命令行复制
在CMD命令提示符窗口中点击鼠标右键,选择“标记”选项,然后按住鼠标左键不动,拖动鼠标标记想要复制的内容.标记完成以后请按键盘上的“回车”键
- docker安装MySQL8,目录挂载、配置用户名密码、忽略表名大小写、连接数、特殊字符、时区
原文:docker安装MySQL8,目录挂载.配置用户名密码.忽略表名大小写.连接数.特殊字符.时区 一.环境配置 1.系统:centos7.3 2.docker版本:Docker version 1 ...
- hdu 2102 A计划 具体题解 (BFS+优先队列)
题目链接:pid=2102">http://acm.hdu.edu.cn/showproblem.php?pid=2102 这道题属于BFS+优先队列 開始看到四分之中的一个的AC率感 ...