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 相关文章推荐
Google Map Api和GOOGLE Search Api整合实现代码
Jul 18 Javascript
调用js时ie6和ie7,ff的区别
Aug 19 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
微信小程序实用代码段(收藏版)
Dec 17 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
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
jquery trim() 功能源代码
2011/02/14 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
Angular2库初探
2017/03/01 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
详解React中setState回调函数
2018/06/14 Javascript
微信小程序中时间戳和日期的相互转换问题
2018/07/09 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
element UI upload组件上传附件格式限制方法
2018/09/04 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
微信小程序一周时间表功能实现
2019/10/17 Javascript
vue实现购物车的监听
2020/04/20 Javascript
JavaScript或jQuery 获取option value值方法解析
2020/05/12 jQuery
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
django实现用户登陆功能详解
2017/12/11 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
Python进行统计建模
2020/08/10 Python
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
2014年清明节寄语
2014/04/03 职场文书
幼儿园健康教育方案
2014/06/14 职场文书
社保转移委托书范本
2014/10/08 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
教师节感想
2015/08/11 职场文书
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server