Vue 中img图片加载失败解决方案

Posted 2020-12-13 wangjiahui

在Vue有时候你引用本地图片在本地环境可以正常显示,但是到了服务器上就出现资源请求失败以及无法显示的情况。

这是因为当你在元素里面绑定:src时,Vue将绑定属性的路径作为字符串输出了。

export default {
      data () {
         return {
            img: ‘../../XXX/XXX/xx.png‘      
      }
    }
}

//////////
<img :src="img"> // 这种方式会先找到路径解析完在渲染图片

以上解决方法对于单个的渲染非常合适,但是如果后端是个憨批给你返回的list中img字段不是一个url而是你本地对应的图片名称,得需要用到require()方法亲求本地文件

export default {
      data () {
         return {
            imgList:[
                  {
                        img: ‘XX.png‘,
                        title: ‘测试‘
                  },{
                        img: ‘XX2.png‘,
                        title: ‘测试2‘
                  }
            ]
      }
    }
}

////////////////

<div v-for="(item, index) in imgList" :key="index">
  <img :src="require(`../../xxx/xxx/${item.img}`)" alt="测试">
  <span>{{item.title}}</span>
</div>

以上方法基本可以解决大多数Vue中图片加载失败的问题。但是最好的方式还是前后端在开发前沟通好。还有就是服务器配置方面的问题，在Vue的项目中,如果亲求图片资源的url域名少一段则需要自己在webpack中根据开发环境生产环境自己进行配置。