问题代码:

<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地址的更多相关文章

  1. C#正则表达式提取HTML中IMG标签的SRC地址(转)

    一般来说一个 HTML 文档有很多标签,比如“<html>”.“<body>”.“<table>”等,想把文档中的 img 标签提取出来并不是一件容易的事.由于 i ...

  2. C#正则表达式提取HTML中IMG标签的SRC地址

    一般来说一个 HTML 文档有很多标签,比如“<html>”.“<body>”.“<table>”等,想把文档中的 img 标签提取出来并不是一件容易的事.由于 i ...

  3. 正则表达式提取HTML中img标签的src地址

    一般来说一个 HTML 文档有很多标签,比如“”.“”.“”等, 想把文档中的 img 标签提取出来并不是一件容易的事. 由于 img 标签样式变化多端,使提取的时候用程序寻找并不容易. 于是想要寻找 ...

  4. Vue.js自定义标签属性并获取属性,及绑定img的src属性的坑

    一.定义属性: 一般定义属性都是为了动态的去获取属性的值,或者动态的设置属性的值,如果想仅仅是设置一个普通的属性,直接在便签上设置属性即可,就像使用html的title.name等属性一样,如< ...

  5. Vue系列——动态设置img标签的src属性

    声明 本文转自:vue动态设置img的src路径 正文 相信开发的小伙伴已经遇到这个问题了,动态切换img标签的src时,写的路径就是不生效,原因是vue并没有把你的路径字符串当做路径来处理,而是直接 ...

  6. 正则获取HTML代码中img的src地址

    /// <summary> /// 获得HTML中所有图片的src地址 /// </summary> /// <param name="sHtmlText&qu ...

  7. 第四节:Vue表单标签和组件的基本用法,父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  8. 如何提取HTML代码中img的src地址?

    答案:专门的代码 使用专门的正则表达式 /// <summary> /// 获得HTML中所有图片的src地址[比较稳定的一个版本] /// </summary> /// &l ...

  9. HTML <frame> 标签的 src 属性

    HTML <frame> 标签 实例 src 属性规定在框架中显示的文档的位置: <html> <frameset cols="50%,50%"> ...

随机推荐

  1. CxImage 简单配置与使用

    CxImage 简单配置与使用 如果本篇文章还不能解决你在生成解决方案以及便宜过程中的问题 请参阅: http://blog.csdn.net/afterwards_/article/details/ ...

  2. BZOJ 4260 trie树

    思路: 搞一个前缀异或和 一次从左往右 另一次从右往左 异或最大值 用字典树搞一搞 //By SiriusRen #include <cstdio> #include <cstrin ...

  3. POJ 2188线段树求逆序对

    题目给的输入是大坑,算法倒是很简单-- 输入的是绳子的编号wire ID,而不是上(或下)挂钩对应下(或上)挂钩的编号. 所以要转换编号,转换成挂钩的顺序,然后再求逆序数. 知道了这个以后直接乱搞就可 ...

  4. 计算label

    func getCGSize(size:CGSize,fontSize:CGFloat,text:String)->CGSize{ let attributes = [NSFontAttribu ...

  5. xxx while the managed IDbConnection interface was being used: Login failed for user xxx

    Process cube的时候遇到如下错误.   Errors in the high-level relational engine. The following exception occurre ...

  6. X86 X64 X86_64 AMD64 区别

    X86:32位(一般i386是32位CPU的统称) X64:64位(代表CPU:IA64,现在几乎没有这样纯粹的64位CPU,都是兼容32位的64位CPU,如下) X86_64:兼容32位的64位CP ...

  7. Android ViewPager系列之ViewPager一屏显示多个子页面

    ViewPager一屏显示多个子页面,常见的有两种形式: 1.当前展示的页面右侧显示一部分下个页面的内容 2.当前页面居中,左右两边分别显示上一个页面.下一个页面 第 1 种表现形式的实现代码 其实这 ...

  8. 004.ES2015和ES2016新特性--块级作用域变量

    其基本原理就是JavaScript的作用域链,下面以对比的方式来展示一下函数级作用域和块级作用域. 函数级作用域 var fns = []; for (var i = 0; i < 5 ; i+ ...

  9. 转Hibernate继承

    hibernate继承映射 以下测试是在mysql中进行的. 1.单表方式 Animal.java @Entity @Inheritance(strategy=InheritanceType.SING ...

  10. STM8S汇编代码分析

    转载:http://blog.csdn.net/u010093140/article/details/50021897使用STVD建立完汇编工程项目之后(具本建立方法可以看我的另一篇博文http:// ...