后端返回图片资源错误404,前端使用默认图片

后端返回的图片资源可能会因为各种原因(后台误删,地址更改未及时更新,损毁)出现无法展示的情况,比如这种报错

就会导致图片资源错误,页面出现这种情况

后端返回图片资源错误404,前端使用默认图片_第1张图片 

用户体验很不好,为了改善这种情况,可以在资源加载的时候加个监听,如果图片加载失败就显示默认图片,如图:

后端返回图片资源错误404,前端使用默认图片_第2张图片 

其实就是给图片标签加个错误监听事件

 onerror监听图片加载失败

onErrorImg(event) {
      event.target.src = require("@/assets/404_images/default_img.png");
    },

 以上即可实现图片报错时展示默认图片

你可能感兴趣的:(前端)