标签：遍历 name img number webp vue 本地 imgSrc id
vue使用v-for遍历本地图片不显示问题
1、项目中本地有一组图片需要循环遍历展示，在使用v-for遍历之后发现无法展示图片，解决方法如下。
2、首先，正常的图片路径如下，但是想要展示不能按正常的来。需要遍历的数据正常情况如下。
// 重点代办任务数据
toDoListDate: [
{ id: 1, name: '即将响应超时', number: 20, imgSrc: '../common/img/group1.webp' },
{ id: 2, name: '即将完成超时', number: 21, imgSrc: '../common/img/group2.webp' },
{ id: 3, name: '响应超时', number: 20, imgSrc: '../common/img/group3.webp' },
{ id: 4, name: '完成超时', number: 23, imgSrc: '../common/img/group4.webp' },
{ id: 5, name: '客户催单', number: 25, imgSrc: '../common/img/group7.webp' },
{ id: 6, name: '重新维修', number: 27, imgSrc: '../common/img/group6.webp' },
{ id: 7, name: '暂停任务', number: 0, imgSrc: '../common/img/group5.webp' },
],
3、假设使用以下的方法
<img v-for= "item in toDoListDate" :key = "item.id" :src="item.imgSrc"alt="" srcset="">
这种做法拿不到本地图片，原因不明，但是有解决方法。
4、解决方法如下，在导入路径时使用 require
- 4.1、这里需要改变以下需要遍历数据的本地图片地址，本质其实就是把图片地址拆成两节，使用 require 拼接。先修改本地需遍历的数据，如下。
// 重点代办任务数据
toDoListDate: [
{ id: 1, name: '即将响应超时', number: 20, imgSrc: 'img/group1.webp' },
{ id: 2, name: '即将完成超时', number: 21, imgSrc: 'img/group2.webp' },
{ id: 3, name: '响应超时', number: 20, imgSrc: 'img/group3.webp' },
{ id: 4, name: '完成超时', number: 23, imgSrc: 'img/group4.webp' },
{ id: 5, name: '客户催单', number: 25, imgSrc: 'img/group7.webp' },
{ id: 6, name: '重新维修', number: 27, imgSrc: 'img/group6.webp' },
{ id: 7, name: '暂停任务', number: 0, imgSrc: 'img/group5.webp' },
],
- 4.2、这里可以发现后面的图片路径地址少了一截，这里对比一下少了啥。
- 这是之前的
{ id: 1, name: '即将响应超时', number: 20, imgSrc: '../common/img/group1.webp' },
- 这是修改后的
{ id: 1, name: '即将响应超时', number: 20, imgSrc: 'img/group1.webp' },
- 我们会发现少了…/common/这个片段，那个片段去哪儿？后面使用require会用到。
5、修改本地需要遍历的数据之后，我们再去需改遍历图片的代码。我们对比一下前后的代码，
- 5.1、只是未修改的。
<img v-for= "item in toDoListDate" :key = "item.id" :src="item.imgSrc"alt="" srcset="">
- 这是修改后的
<img v-for= "item in toDoListDate" :key = "item.id" :src="require('../common/'+item.imgSrc)" alt="" srcset="">
- 5.2、我们会发现这里的图片地址发生了明显的变化。
- 之前是:src=“item.imgSrc” 之后是:src=“require(’…/common/’+item.imgSrc)”
由此我们知道之前的本地需要遍历的数据里面少的…/common/这个片段是加在了这里。
使用了require将被拆开的图片地址再次拼接起来。这样就可以遍历展示本地图片了。
6、注意事项
- 这里我们在拆分图片路径地址时，应该注意一边的固定不变的，一边是动态的。比如这里的…/common/就是不变的，后面的地址会动态变动，因此提出…/common/放在require里面。
标签：遍历,name,img,number,webp,vue,本地,imgSrc,id 来源： https://blog.csdn.net/supperi/article/details/110916903
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。