Vue动态设置img的src不生效的问题

原因分析

在VUE项目中有时会遇到需要动态修改Img的src的情况，如果直接修改会使得图片无法显示出来
这是由于src被当做静态资源处理了，并没有进行编译。

<template>
    <div class="first">
      <!-- 普通加载 （不显示）出错-->
     <el-carousel height="280px">
          <el-carousel-item v-for="(item,index) in banners" :key="index">
            <img :src="item" alt="">
          </el-carousel-item>
        </el-carousel>
    </div>
</template>
<script>
export default {
    
    
  // 定义数据
    data(){
    
    
        return {
    
    
            banners:["./2.jpeg","./3.jpeg"],
          }
    },
}
</script>
 

解决办法

第一种 使用require引入图片

<template>
     <el-carousel height="280px">
          <el-carousel-item v-for="(item,index) in banners" :key="index">
            <img :src="item" alt="">
          </el-carousel-item>
        </el-carousel>
</template>
<script>
export default {
    
    
  // 定义数据
    data(){
    
    
        return {
    
    
              banners: [require('../../assets/images/banner1.jpg'), require('../../assets/images/banner2.jpg'), require('../../assets/images/banner3.jpg')]
          }
    },
}
</script>

第二种 将图片先引入文件中

<template>
    <el-carousel height="280px">
          <el-carousel-item v-for="(item,index) in banners" :key="index">
            <img :src="item" alt="">
          </el-carousel-item>
        </el-carousel>
    </div>
     
</template>
<script>
import img1 from "../../assets/images/banner1.jpg"
import img2 from "../../assets/images/banner2.jpg"
import img3 from "../../assets/images/banner3.jpg"
export default {
    
    
  // 定义数据
    data(){
    
    
        return {
    
    
              banners:[img1,img2,img3]
          }
    },
}
</script>

第三种 将图片放入vue项目的public文件夹中，在根目录调用

<template>
     <el-carousel height="280px">
          <el-carousel-item v-for="(item,index) in banners" :key="index">
            <img :src="item" alt="">
          </el-carousel-item>
        </el-carousel>
</template>
<script>
export default {
    
    
  // 定义数据
    data(){
    
    
        return {
    
    
              banners: ['/banner1.jpg','/banner2.jpg','/banner3.jpg']
          }
    },
}
</script>

实现效果