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 调用路径,就能解决问题。

Logo

前往低代码交流专区

更多推荐