React 图片加载错误处理

页面在加载图片的时候,如果图片资源不存在,为了更好的用户体验,我们一般会用一张默认图片替换,提醒用户当前图片缺失。

但还有一种情况是图片地址存在,只是图片地址出错了返回了404错误,这时也需要使用一张默认图片替换。

然而我们的设计师给我的是一个SVG文件,SVG文件我们都是封装成组件的形式调用,所以我无法生成一个图片链接替换。

在参考了以下链接后,我动手写了一个组件。

https://stackoverflow.com/questions/34097560/react-js-replace-img-src-onerror

完整源码:

父组件调用:

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180627G0H0I600?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券