问题代码:

<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. Python入门机器学习

    如何通过Python入门机器学习 我们都知道机器学习是一门综合性极强的研究课题,对数学知识要求很高.因此,对于非学术研究专业的程序员,如果希望能入门机器学习,最好的方向还是从实践触发. 我了解到Pyt ...

  2. 13.boost有向无向图邻接表表示

    #include <iostream> #include <boost/config.hpp> //图(矩阵实现) #include <boost/graph/adjac ...

  3. kafka的使用

    kafka基于zookeeper. 需要安装kafka.zookeeper. 安装方法参考:http://tzz6.iteye.com/blog/2401197 启动zookeeper:点击zkSer ...

  4. Tomcat学习(一)——使用Eclipse绑定Tomcat并发布应用

    1.下载Tomcat 官网地址:http://tomcat.apache.org/whichversion.html 2.目录结构 bin:脚本目录 启动脚本:startup.bat 停止脚本:shu ...

  5. frameset宽屏居中写法

    在写frameset的时候发现页面较小的时候不能在屏幕上居中,记录一下frameset页面居中的写法 <frameset cols="*,1280,*" frameborde ...

  6. 3ds max打造诱人三维水果教程:鸭梨_3dmax教程

    本系列我们介绍用3DsMAX打造美味诱人水果的实例,入门者可以按照步骤学习简单的造型和材质设定.之前我们介绍了苹果和桔子的绘制方法,今天我们介绍的主角是——鸭梨. 进入“创建”命令面板.选择“图形”按 ...

  7. CF1065D Three Pieces (多元最短路)

    题目大意:给你一个棋盘,你需要控制棋子依次经过编号为1~n的所有点,棋子的可以是车,马,象,都依照国际象棋的行棋方式,每走一步消耗1单位时间,但每次更换棋子都需要额外1单位时间,求经过所有点需要的最少 ...

  8. es-for-Laravel: Composer 包安装, Laravel 最简单的方式操作 Elasticsearch

    composer 安装:composer require ethansmart/es-for-laravel github 地址:https://github.com/roancsu/es-for-l ...

  9. python学习(二):基本数据类型:整型,字符型

    整型: type():显示数据类型 # 整型,int # python3里,不管数字有多大,都是int类型 # python2里,有大小区分,长整型:long int a = " print ...

  10. 【图灵杯 F】一道简单的递推题(矩阵快速幂,乘法模板)

    Description 存在如下递推式: F(n+1)=A1*F(n)+A2*F(n-1)+-+An*F(1) F(n+2)=A1*F(n+1)+A2*F(n)+-+An*F(2) - 求第K项的值对 ...