vue破图处理

问题描述

按道理前端拿到接口返回的图片地址，直接进行显示，若该图片已经不存在或者被损坏，则会导致前端以“破图”方式显示。
例如：

但是现目前的需求是，若出现“破图”则采用系统默认的图片显示。

解决方法

故此需要更改其代码，实现该功能。
因为 img出现破图，则会触发error事件，则我们可以对该事件，进行src配置。代码如下：

<img :src="base_apiUrl+item.articleImage" @click="goNewsDetails(item)" @error.once="moveErrorImg" />

 //处理破图
 moveErrorImg(event) {
      event.currentTarget.src = require("@/assets/images/common-img.svg");
      event.currentTarget.style.width = "auto";
      return true;
  },

这样就可以避免网站出现破图了。🤭