vue v-for 图片不显示解决方案

最新推荐文章于 2024-10-15 11:30:33 发布

@疯子

最新推荐文章于 2024-10-15 11:30:33 发布

阅读量2.5k

点赞数 4

文章标签： vue 图片不显示问题 v-for图片不显示 vue列表循环图片不显示

本文链接：https://blog.csdn.net/huafeng1999/article/details/89708583

版权

vue v-for后图片不显示解决方法

<ul class="new-item" v-for="item in lists" :key="item">
   <li class="new-item-img">
      <img :src="item.images" alt>
    </li>
    <li>{{item.text}}</li>
</ul>

第一种解决方法

直接在lists中利用require语句

lists: [
        {
          images: require('@/assets/img/index1.jpg'),
          text: '这是文本'
        },
        {
          images: require('@/assets/img/index2.jpg'),
          text: '这是文本'
        },
      ],

第二种解决方法

先要引入图片


// 引入图片
import news_img  from "@/assets/img/index1.jpg";
import new_img from "@/assets/img/index2.jpg";

然后直接用变量的方式写在lists中

lists: [
        {
          images: news_img,
          text: '这是文本'
        },
        {
          images: new_img from,
          text: '这是文本'
        },
      ],

第三种方法

在项目目录下新建静态文件夹public 将图片文件放在该目录下的img文件夹

在这里插入图片描述

之后就可以直接引用图片了 注意引入时路径不要错了

lists: [
        {
          images:/img/index1.jpg,
          text: '这是文本'
        },
        {
          images: /img/index1.jpg,
          text: '这是文本'
        },
      ],