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%"> ...
随机推荐
- linux下挂载ISCSI存储设备
安装 首先要在存储设备上做好RAID,设置好iSCSI 目标方(target). 这里主要说明iSCSI initiator的安装. 不同的操作系统对应各自的iSCSI initiator,以Redh ...
- angular4(2-2)angular脚手架引入第三方类库(swiper)
试了好多方法,npm install 方法失败了,下载到本地是可以使用的: 将swiper文件放到assets文件下: 项目目录下:(命令行) 因为ts并不能准确识别js语法,所以需要用ts中的int ...
- Django shortcut functions
django.shortcuts package提供提供帮助类和函数可以更便捷的操作MVC中的每一部分,包含: render(request, template_name,[dictionary],[ ...
- load多个数据文件的yaml
VERSION: 1.0.0.1DATABASE: testUSER: adminHOST: node31PORT: 5432GPLOAD: INPUT: - SOURCE: LOCAL_HOSTNA ...
- 【原创】关于JMS[1]
面向消息中间件(MOM)为分布式系统提供异步,解耦,稳定,可扩展和安全的行为.MOM在分布式计算领域是一个重要的概念.它允许应用使用代理器API在分布式环境实现各种功能.Java消息服务(Java M ...
- [agc004c]and grid
别问我为什么咕了两天 题意: 给出一个$H\times W$的网格图A,仅由'.'和'#'构成,边界上没有'#'且至少有一个'#'.构造两个网格图B和C,大小均为$H\times W$,要求A中为'# ...
- Git日常操作指令
1. 将本地项目上传到码云: ①. 码云上创建一个项目 ②. 本地文件项目内右键git bash进入git控制台 ③. git init 命令 -- 会在本地创建一个.git文件夹 ④. git ...
- PNG文件结构分析
http://blog.163.com/iwait2012@126/blog/static/16947232820124411174877/ PNG文件结构分析 对于一个PNG文件来说,其文件头总是由 ...
- Java8 Lamdba表达式 002
本篇将讲述lamdba表达式的排序,本例包括一个Player对象的集合[稍后定义],通过每一个player的分数高低对列表的player进行排序.类定义001例如以下 public class Sor ...
- BeautifulSoup的高级应用 之.parent .parents .next_sibling.previous_sibling.next_siblings.previous_siblings
继上一篇BeautifulSoup的高级应用,主要解说的是contents children descendants string strings stripped_strings.本篇主要解说.pa ...