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 相关文章推荐
Javascript SHA-1:Secure Hash Algorithm
Dec 20 Javascript
jquery 列表双向选择器之改进版
Aug 09 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
微信小程序基于本地缓存实现点赞功能的方法
Dec 18 Javascript
基于vue-video-player自定义播放器的方法
Mar 21 Javascript
让mocha支持ES6模块的方法实现
Jan 14 Javascript
javascript实现贪吃蛇小游戏
Jul 28 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 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危险函数(disable_functions)
2012/02/23 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
JavaScript保留关键字汇总
2015/12/01 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
Python中表示字符串的三种方法
2017/09/06 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
Python交互环境下实现输入代码
2018/06/22 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
CSS3 文字动画效果
2020/11/12 HTML / CSS
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
小学新学期寄语
2014/04/02 职场文书
学生安全责任书
2014/04/15 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
喋血孤城观后感
2015/06/08 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
学校远程教育工作总结
2015/08/11 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python