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%"> ...
随机推荐
- 91.Bower : ENOGIT git is not installed or not in the PATH 解决方法
转自:https://www.haorooms.com/post/bower_error 今天在用bower安装依赖的时候,出现了Bower : ENOGIT git is not installed ...
- OEM12C(12.1.0.5)安装插件监控mysql(linux)
目录结构: 文章参考论坛:https://blog.csdn.net/u010719917/article/details/78128200 环境说明: oms:12.1.0.5 os:centos ...
- SQL Server: Windows Firewall with Advanced Security
SQL Database Engine: TCP 1433 & UDP 1434 SQL Analysis Service: TCP 2383 (2382 if named instance) ...
- (转载)详解7.0带来的新工具类:DiffUtil
[Android]详解7.0带来的新工具类:DiffUtil 标签: diffutil 2017-04-17 18:21 226人阅读 评论(0) 收藏 举报 分类: Android学习笔记(94) ...
- LeetCode hard 668. Kth Smallest Number in Multiplication Table(二分答案,一次过了,好开心,哈哈哈哈)
题目:https://leetcode.com/problems/kth-smallest-number-in-multiplication-table/description/ 668. Kth S ...
- 用Maven创建第一个web项目Struts2项目
一.创建一个web项目 参考前面文章,项目名:maven-struts-demo. 二.配置pom.xml文件添加struts2依赖 <project xmlns="http://ma ...
- SpringCloud学习笔记(16)----Spring Cloud Netflix之Hystrix Dashboard+Turbine集群监控
前言: 上一节中,我们使用Hystrix Dashboard,只能看到单个应用内的服务信息.在生产环境中,我们经常是集群状态,所以我们需要用到Turbine这一应用. 作用:汇总系统内的多个服务的数据 ...
- .NET 拼音汉字转化(全面)
引言 这是一个.NET 用C#语言编写的 拼音转汉字类,考虑到有很多拼音转汉字,但是试用过发现大部分有很多生僻字都没有办法显示.在此分享一个支持绝大多数的较为全面的拼音汉字转化帮助类.不多说,代码附 ...
- Vue中两种传值方式
第一种:通过url传参,直接在地址后加? ,通过this.$route.query对象获取 第二种:通过路由传参,修改路由,通过this.$route.params对象获取
- CF1005F Berland and the Shortest Paths (树上构造最短路树)
题目大意:给你一个边权为$1$的无向图,构造出所有$1$为根的最短路树并输出 性质:单源最短路树上每个点到根的路径 ,一定是这个点到根的最短路之一 边权为$1$,$bfs$出单源最短路,然后构建最短路 ...