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: '这是文本'
        },
      ],
Logo

前往低代码交流专区

更多推荐