前言

本篇记录一个小知识点，有时候后端请求来的图片数据不存在，我们需要展示默认自定义的图片，如果项目没有规定加载失败的图片，大家都可以直接用组件库自带的image加载失败图展示即可。当然如果想使用UI专用图，img自带的属性onerror也可处理。

一. 封装utils

只需要在img属性onerror绑定函数进行处理即可。

     <div class="content-left">
        <img
          class="pic"
          :src="item.picUrlList[0] ? item.picUrlList[0] : ''"
          :onerror="imgOnError"
        />
     </div>

import err from '@/assets/err.png'

//图片损毁时触发
export const imgOnError = (e: any) => {
  let img = e.srcElement
  img.src = err
  img.onerror = null //防止闪图
}