页面在加载图片的时候，如果图片资源不存在，为了更好的用户体验，我们一般会用一张默认图片替换，提醒用户当前图片缺失。
但还有一种情况是图片地址存在，只是图片地址出错了返回了404错误，这时也需要使用一张默认图片替换。
然而我们的设计师给我的是一个SVG文件，SVG文件我们都是封装成组件的形式调用，所以我无法生成一个图片链接替换。
在参考了以下链接后，我动手写了一个组件。
https://stackoverflow.com/questions/34097560/react-js-replace-img-src-onerror
组件的大体逻辑如下：
1 如果图片正常，则渲染28行的图片。
2 this.state.reveal状态初始为false，表示不显示默认的替换图片。
3 如果onError事件被触发，则调用revealDefaultImage方法，将this.state.reveal状态更改为true.
4 如果图片地址不存在或者地址错误，则显示25行的默认替换图片。
完整源码：
DefaultImage.tsx
父组件调用：
页面在加载图片的时候，如果图片资源不存在，为了更好的用户体验，我们一般会用一张默认图片替换，提醒用户当前图片缺失。...
img标签src加载图片，如果src加载失败，触发onerror事件加载一张默认图片； 如果onerror也加载失...
[代码]img标签src对应的图片不存在，显示一个默认的onerror="this.src='img/defaul...
按比例自定义缩放图像 img调用错误图像显示： onerror="onerror=null;src='/imgEr...
"/>
img标签的onerror事件应用 适用场景：img标签中的src图片加载失败，原来的图片位置会出现一个碎片图标，...
img标签中有一个onerror事件。是当我引用的src属性获取不到图片或者网络错误导致无法正常显示我src属性的...
情景分析：有时，img标签中的src图片加载失败，原来的图片位置会出现一个碎片图标，用户体验会下降。 这个要借用i...
我们都知道，img标签当图片失效时，可以通过onerror属性进行src默认图片的设置，如下： 但是，当我们设置动...
本文标题：React replace img src onError
本文链接：https://www.haomeiwen.com/subject/bqxbyftx.html
网友评论