vue开发 笔记

webpack vue 图片路径变量问题

业务背景：使用vue公众号页面时，使用banner图时图片的路径是从后台传入的。
如下
template部分

<!-- 这部分放你要渲染的那些内容 -->
<swiper-slide v-for="(item,index) in banners" :key="index" class="swiper_item">
     <img :src="item.src" alt="轮播图" class="pic">
</swiper-slide>

js部分

 banners: [
    { src: require("../../assets/train-bg.png") },
    { src: require("../../assets/course-item-bg.png") } 
  ],

js部分使用本地静态资源的时候不会报错，当接入后台接口数据是，就会报错

if(resData.BannerData.length != 0){
  resData.BannerData.forEach(function(item,index){
     _this.banners.push({ src: require(item.banner_image) });
   });
 }

报错信息

解决方法就是直接使用路径，不使用require函数处理资源，入下

if(resData.BannerData.length != 0){
  resData.BannerData.forEach(function(item,index){
     _this.banners.push({ src: item.banner_image});
   });
 }

使用img标签 出现多余的白色

对img设置display:block;就解决了