建议只用懒加载 ：https://www.npmjs.com/package/vue-lazyload

npm install vue-lazyload --save-dev

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {     
loading: require('img/loading.png'),//加载中图片，一定要有，不然会一直重复加载占位图     
error: require('img/error.png')  //加载失败图片}); 

img:

<img v-lazy="'/static/img/' + item.productImage" :key="'/static/img/' + item.productImage"> //将 :src 属性直接改为v-lazy, :key是为了防止刷新页面或图片更改时图片不更新

背景图:

<div style="width:100px;height:100px;" v-lazy:background-image="{src: item.imgpath}"></div>

v-html，如从后台获取的富文本字符串中图片:（用replace将src替换为data-src）

<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
  <img data-src="//domain.com/img1.jpg">
  <img data-src="//domain.com/img2.jpg">
  <img data-src="//domain.com/img3.jpg">  
</div>

情景：img标签中的src图片加载失败，原来的图片位置会出现一个碎片图标，用户体验会下降。

使用img的onerror事件，当图片不存在时，将触发 onerror，而 onerror 中又为 img 指定一个logoError.png 图片。也就是说图片存在则显示logo.png，图片不存在将显示 logoError.png。

解决方法一、图片路径错误使用默认图片站位：

使用1：html开发中

<img src="images/logo.png" οnerrοr="javascript:this.src='images/logoError.png';">

//控制它不循环，代码如下：
<img src="images/logo.png" οnerrοr="nofind();" />

function nofind(){
var img=event.srcElement;
img.src="images/logoError.png";
img.οnerrοr=null; 控制不要一直跳动
} 

如果logoError.png 也不存在，则继续触发 onerror，导致循环，故会出现打开网页时提示 Stack overflow at line: 0错误。特别说明：如果图片存在，但网络很不通畅，也可能触发 onerror。

使用2：vue开发中，this不在是元素本身了

 //当默认图也不存在时，图片加载死循环。
<img class=avator' :src="data.picture" :onerror="defaultImg">

data(){
   return {
       defaultImg: 'this.src="' + require('../../assets/images/moren.png') + '"'
   }
}

//不建议
<image :src="item.specMainPicture | filterImgUrl" @error="imageError(index)"></image>

imageError: function(index) {
	this.gList[index].Picture = this.ImgUrl+"/static/category/ blockimg.png";
},


//建议
< img src=“123” @error=“defImg()” />
 
defaultImg: require("./img/defPic.png")
import defaultImg from './img/defPic.png'
defImg(){
	 let img = event.srcElement;   //当前元素
	 img.src = this.defaultImg;
	 img.onerror = null; //防止闪图
 }

使用3：可以给img标签加背景图片，代码如下：

.headLogo img{
    display: block;
    width: 270px;
    height: 60px;
    background: url(../images/logo.png) no-repeat 0 0;
    margin: 25px 0;
 }

左上角任然有碎片图标，还需借用img标签的onerror事件和javascript（参考上文）， 在装载文档或图像的过程中如果发生了错误，就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片

使用4：大招 通过vue自定义指令

//全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img的src属性，否则使用默认图片
Vue.directive('real-img', async function (el, binding) {//指令名称为：real-img
    let imgURL = binding.value;//获取图片地址
    if (imgURL) {
        let exist = await imageIsExist(imgURL);
        if (exist) {
            el.setAttribute('src', imgURL);
        } 
    }
})

/**
 * 检测图片是否存在
 * @param url
 */
let imageIsExist = function(url) {
    return new Promise((resolve) => {
        var img = new Image();
        img.onload = function () {
            if (this.complete == true){
                resolve(true);
                img = null;
            }
        }
        img.onerror = function () {
            resolve(false);
            img = null;
        }
        img.src = url;
    })
}

<!--v-real-img 就是刚刚定义的指令，绑定的为真实要显示的图片地址。src为默认图片地址-->
<img src="images/logoError.png" v-real-img="images/logo.png">

解决方法二、图片展示不出来，删除图片不展示它：

< img src=“123” :οnerrοr=“defaultImg” />
默认图地址
defaultImg: ‘this.remove()’
因为错误图片在各个浏览器失败的样式都一样，所以地址错误时，直接删除img标签