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获得控件值的三种方法总结
Feb 13 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
js实现简易点击切换显示或隐藏
Nov 29 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编码规范之注释和文件结构说明
2010/07/09 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
destoon网站转移服务器后搜索汉字出现乱码的解决方法
2014/06/21 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
JS高级笔记
2011/07/13 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
2015/09/21 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
jquery css实现流程进度条
2020/03/26 jQuery
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
python验证码识别实例代码
2018/02/03 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
高中自我鉴定
2013/12/20 职场文书
工作睡觉检讨书
2014/02/25 职场文书
小学社团活动总结
2014/06/27 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
资产移交协议书
2016/03/24 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
Pandas-DataFrame知识点汇总
2022/03/16 Python