问题代码:

<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. HTML与CSS学习记录

    title: HTML与CSS学习记录 toc: true date: 2018-09-10 14:04:59 <HTML与CSS进阶教程读书笔记> HTML基础知识 HTML与XHTML ...

  2. Codeforces 659F Polycarp and Hay 并查集

    链接 Codeforces 659F Polycarp and Hay 题意 一个矩阵,减小一些数字的大小使得构成一个连通块的和恰好等于k,要求连通块中至少保持一个不变 思路 将数值从小到大排序,按顺 ...

  3. vue项目中设置全局引入scss,使每个组件都可以使用变量

    在Vue项目中使用scss,如果写了一套完整的有变量的scss文件.那么就需要全局引入,这样在每个组件中使用. 可以在mian.js全局引入,下面是使用方法. 1: 安装node-sass.sass- ...

  4. zookeeper客户端命令行操作

    一.命令行 (1)使用zookeeper安装bin目录下的./zkCli.sh连接到zookeeper服务器上,基本语法如下: ./zkCli.sh -timeout 0 -r -server ip: ...

  5. Photoshop CC (2015.5) 2016.6 版已发布

    Photoshop CC (2015.5) 2016.6 版已发布 adobe-cc-no-more-direct-download-links.html 不再有直接下载的升级包了,不开心 :( 下载 ...

  6. vue+Element实现tree树形数据展示

    组件: Element(地址:http://element.eleme.io/#/zh-CN/component/tree):Tree树形控件 <el-tree ref="expand ...

  7. Android 开发环境安装配置手册

    本文指导,如何一步步搭建Android开发平台. 1  下载软件 n JDK 1.5+   到  http://java.sun.com/javase/downloads/index.jsp 下载 n ...

  8. hiho 1620 - 股票价格3 - 无限制的单调队列?

    题目链接 小Hi最近在关注股票,为了计算股票可能的盈利,他获取了一只股票最近N天的价格A1~AN. 小Hi想知道,对于第i天的股票价格Ai,几天之后股价会第一次超过Ai. 假设A=[69, 73, 6 ...

  9. LeetCode(10)Regular Expression Matching

    题目如下: Python代码: # -*- coding:utf-8 -*- def ismatch(s,p): #先将dp[s+1][p+1]二维数组全置为False dp = [[False] * ...

  10. [NOI2018]你的名字(68pts) 后缀自动机

    讲解在满分做法的博客中 Code: #include <cstdio> #include <algorithm> #include <cstring> #defin ...