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%"> ...
随机推荐
- Ubuntu 18.04 关闭GUI
在安装显卡驱动时, 可能需要关闭GUI, 在终端中输入: sudo service gdm3 stop
- Java8 方法引用与构造器引用,数组引用
package java_8; import org.junit.Test; import java.io.PrintStream; import java.util.Comparator; impo ...
- vue 父子组件传值以及方法调用,平行组件之间传值以及方法调用大全
vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道.基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好. vue常用的传值方式以及方法有: 1. 父值传子( ...
- MySQL日期数据类型和时间类型使用总结
转自: http://blog.chinaunix.net/space.php?uid=11327712&do=blog&id=32416 MySQL 日期类型:日期格式.所占存储空间 ...
- vim编辑器常用语法
1)yy (功能描述:复制光标当前一行) y数字y (功能描述:复制一段(从第几行到第几行))2)p (功能描述:箭头移动到目的行粘贴)3)u (功能描述:撤销上一步)4)dd (功能描述:删除光标当 ...
- C++之const关键字
本文引自http://www.cnblogs.com/lichkingct/archive/2009/04/21/1440848.html ,略有增删 const关键字在c++中用法有很多,总结如下: ...
- SpringBoot学习笔记(14)----应用监控-HTTP方式
SpringBoot提供了三种应用监控的方式 通过HTTP(最简单方便) 通过JMX 通过远程shell 这里就是用最简单的方式来使用SpringBoot的应用监控 首先引入依赖,pom文件如下 &l ...
- SpringBoot学习笔记(7)-----CORS支持解决跨域问题
在实际应用开发中,跨域是一个比较常见的问题,解决方法可以用jsonp,frame,cors等, 这里示例的是SpringBoot对CORS的支持的三种实现方式 第一种:配置一种全局的支持,这种方式需要 ...
- sass的用法小结(三)
5. 混合器; 如果你的整个网站中有几处小小的样式类似(例如一致的颜色和字体),那么使用变量来统一处理这种情况是非常不错的选择.但是当你的样式变得越来越复杂,你需要大段大段的重用样式的代码,独立的变量 ...
- luogu P1495 曹冲养猪(中国剩余定理)
题意 题解 翻到了一个金句 就跟这句话说得一样,就是个裸题. 所以看模板呗. #include<iostream> #include<cstring> #include< ...