vue中v-for加载本地静态图片方法


Posted in Javascript onMarch 03, 2018

vue-cli 项目中本地图片放在assets目录下(原因vue-cli最开始的vue图片就在里面,就把所有图片放在里面了);

之后v-for 动态加载图片路径就遇到了问题

源码:

<ul>
<li v-for="(item,index) in teamInfo" @click="trastFun(item)">
<div><img v-bind:src="item.imageurl"/></div>
<p>{{item.name}}</p>
<p>{{item.position}}</p>
<div class="icon-vs">VS</div>
</li>
</ul>
for(var i = 0;i<self.teamInfo.length;i++){
var j= i+1;
self.teamInfo[i].imageurl = '../../assets/crop'+j+'.png';
}

结果发现浏览器中虽然img 的src 路径加载出来.但图片并未显示,百度后发现是webpack打包解析为了字符串,而非真实路径

改为

for(var i = 0;i<self.teamInfo.length;i++){
var j= i+1;
self.teamInfo[i].imageurl = require('../../assets/crop'+j+'.png');
}

当然如果一开始将静态图片放在static目录下,可能就不会出现这样的问题,一开始就欠缺考虑了。

以上这篇vue中v-for加载本地静态图片方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
CSS+JS构建的图片查看器
Jul 22 Javascript
最近项目写了一些js,水平有待提高
Jan 31 Javascript
jQuery Ajax 全解析
Feb 08 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
基于原生js实现判断元素是否有指定class名
Jul 11 Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 #Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 #Javascript
vue.js select下拉框绑定和取值方法
Mar 03 #Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 #Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 #Javascript
JS表单传值和URL编码转换
Mar 03 #Javascript
jQuery实现左右滑动的toggle方法
Mar 03 #jQuery
You might like
3种平台下安装php4经验点滴
2006/10/09 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
百度工程师讲PHP函数的实现原理及性能分析(一)
2015/05/13 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
新闻内页-JS分页
2006/06/07 Javascript
javascript基本语法分析说明
2008/06/15 Javascript
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
javascript自定义事件功能与用法实例分析
2017/11/08 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
Python深入学习之闭包
2014/08/31 Python
python统计一个文本中重复行数的方法
2014/11/19 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
python MySQLdb使用教程详解
2018/03/20 Python
python后端接收前端回传的文件方法
2019/01/02 Python
python实现两张图片的像素融合
2019/02/23 Python
python滑块验证码的破解实现
2019/11/10 Python
Series和DataFrame使用简单入门
2019/11/13 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
送给程序员的20个Java集合面试问题
2014/08/06 面试题
机关作风整顿个人整改措施2014
2014/09/17 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
2015年植树节活动总结
2015/02/06 职场文书
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android