vue使用v-for遍历本地图片不显示

最新推荐文章于 2024-08-16 10:46:54 发布

左眼皮一直跳

最新推荐文章于 2024-08-16 10:46:54 发布

阅读量4.7k

点赞数 10

分类专栏：前端

本文链接：https://blog.csdn.net/supperi/article/details/110916903

版权

在Vue项目中，使用v-for遍历本地图片时遇到无法显示的问题。解决方案是通过require动态拼接图片路径。需要将图片地址拆分为固定部分（如…/common/）和动态部分（item.imgSrc），然后在模板中使用:src="require('…/common/'+item.imgSrc)"，确保require包裹的是完整路径。这样可以成功遍历并显示本地图片。

摘要由CSDN通过智能技术生成

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'