vue-lazyload图片错误替换

vue图片懒加载，vue-lazyload官方
错误图片处理：
1、用图片来替换加载过程或者加载失败：

<img v-lazy="ut_item" alt=""/>
CSS：
img[lazy=loading] {
    background: #dfe5ea;
}
img[lazy=error] {
    background: #e8e7e2;
}

2、引入时设置：

Vue.use(VueLazyload, {
  preLoad: 1.3,//距离当前dom距离页面底部的高度 
  error: 'dist/error.png',  // 图片加载异常时，注意开发过程中如果图片放置在assets目录下，图片资源需要使用require()的方式路径引入  
  loading: 'dist/loading.gif',// 图片加载中，中间段显示，和error一样，如果是assets目录下，需要使用require()引入
  attempt: 1，// 图片加载失败，最多重试的次数
  filter:{   // 通过这个方法可以对我们的图片资源路径进行修改
    webp(listener,options){
      let baseImageUrl = '/baseImagePath/image?'
       listener.src = baseImageUrl + listener.src;
   }
  }
})

3、可以单独设置不同的图片错误替换图：

<div v-lazy-container="{selector: 'img' }">
    <img :data-src="ut_item"  :data-error="headError">
</div>
data：{
    return{
      headError: 'img/noUser.png'
    }
}