Vue 中 v-for 图片不显示的解决办法 (亲测可用)

Vue 中 v-for 图片不显示的解决办法 (亲测可用)

一般我们使用 v-for 循环图片的时候习惯使用以下代码：

<el-carousel :interval="4000" type="card" height="200px"> 
   <el-carousel-item v-for="item in items" :key="item">
     <img :src="item.url"> 
     <!-- <img v-bind:src="item.url">-->
   </el-carousel-item>
 </el-carousel>

注：el-carousel 是vue的一个组件名，只需看 img :src=“item.url” 这一部分就行。

<script>
export default {
  name: "Solution",
  data() {
    return { 
      items:[
        {
          "url": "../../assets/sol-select3.jpg"
        },
        {
          "url": "../../assets/sol-select3.jpg"
        },
        {
          "url": "../../assets/sol-select3.jpg"
        },
      ]
    };
  },
};
</script>

此时代码的运行结果为：

我们可以看到，图片并没有显示出来。正确的 js 代码应该这样书写：

<script>
export default {
  name: "Solution",
  data() {
    return { 
      items:[
        {
          "url": require("../../assets/sol-select1.jpg")
        },
        {
          "url": require("../../assets/sol-select2.jpg")
        },
        {
          "url": require("../../assets/sol-select3.jpg")
        },
      ]
    };
  },
};
</script>

在平常的页面中，img:src是可以引用的，但是当把它放在data中，因为放在模版里是会被 webpack 打包出来 ，所以在 js 里写图片路径其实只是一个字符串，webpack 并不会处理。此时就需要使用 require 调用路径，就能解决问题。