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 相关文章推荐
基于jQuery的倒计时实现代码
May 30 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
Aug 05 Javascript
详谈javascript异步编程
Feb 21 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
el-table-column 内容不自动换行的解决方法
Aug 14 Vue.js
基于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
程序员编程十条戒律
2009/07/09 PHP
php导入导出excel实例
2013/10/25 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
几款极品的javascript压缩混淆工具
2007/05/16 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
JavaScript学习笔记之数组的增、删、改、查
2016/03/23 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
Vue中使用的EventBus有生命周期
2018/07/12 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
Vue是怎么渲染template内的标签内容的
2020/06/05 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
解决uWSGI的编码问题详解
2017/03/24 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
JS设计模式之责任链模式实例详解
2018/02/03 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
Python中一些深不见底的“坑”
2019/06/12 Python
200行python代码实现2048游戏
2019/07/17 Python
python框架flask表单实现详解
2019/11/04 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
驾驶员培训方案
2014/05/01 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
中标通知书范本
2015/04/17 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
Java并发编程必备之Future机制
2021/06/30 Java/Android