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

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