react 判断标签img 图片是否存在,不存在则替换为默认图片

简介: react 判断标签img 图片是否存在,不存在则替换为默认图片

利用image对象的onerror事件来判断,出错则更换image对象的src为默认图片的URL。

<img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址'">

注意:如果使用不当,会造成死循环。比如:当【默认图片的url地址】也加载不成功(比如网速比较慢的时候)或不存在的话,

就会反复的加载(触发onerror),最后造成堆栈溢出错误。
解决办法如下
a、更改 onerror 代码为其它处理方式或者确保 onerror 中的默认图片足够小,并且存在。
b、控制onerror事件只触发一次,需要增加这句话:this.onerror=null; 增加后如下:

<img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址;this.onerror=null'"/>

具体代码

<img
              className={styles.urlImg}
              src={"" + item.url + "/favicon.ico"} onError={() => {
                const img = window.event.srcElement;
                img.src = "存在的.png";
                img.οnerrοr = null;
                
              }}
            />

因为 event已经被弃用了

优化

<img
              className={styles.urlImg}
              src={"" + item.url + "/favicon.ico"} onError={(e) => {
                const img = e.currentTarget;
                img.src = "https://api.iowen.cn/favicon/www.aliued.cn.png";
                img.οnerrοr = null;
              }}
            />
相关文章
|
1月前
|
前端开发 API UED
React 懒加载图片 Lazy Image
懒加载是一种优化技术,通过延迟加载不在视口内的图片,减少初始页面加载时间,提升用户体验。本文从基础概念入手,逐步探讨 React 中实现图片懒加载的常见问题、易错点及解决方案,并通过代码案例详细解释。
43 3
|
2月前
|
前端开发 JavaScript UED
react-router 里的 Link 标签和 a 标签有什么区别
`react-router` 中的 `Link` 标签与 HTML 中的 `a` 标签的主要区别在于:`Link` 是专门为 React 应用设计的,用于实现客户端路由导航,不会触发页面的重新加载,而 `a` 标签则会刷新整个页面。使用 `Link` 可以提升应用的性能和用户体验。
|
3月前
|
前端开发
react动态生成input、select标签以及思路总结
本文介绍了在React中动态生成input和select标签的方法,包括准备数据结构、在组件挂载时动态添加状态、页面渲染以及输入处理,最后总结了实现思路。
40 1
react动态生成input、select标签以及思路总结
|
3月前
|
前端开发 Python
React技术栈-React路由插件之自定义组件标签
关于React技术栈中React路由插件自定义组件标签的教程。
65 4
React技术栈-React路由插件之自定义组件标签
|
3月前
|
前端开发 JavaScript
React中Fragment标签和空标签的使用
在React中,Fragment标签用于包裹多个子元素,避免添加不必要的DOM元素,空标签`<>`是Fragment的简写形式。
32 2
|
3月前
|
JavaScript 前端开发
react字符串转为dom标签,类似于Vue中的v-html
本文介绍了在React中将字符串转换为DOM标签的方法,类似于Vue中的`v-html`指令,通过使用`dangerouslySetInnerHTML`属性实现。
108 0
react字符串转为dom标签,类似于Vue中的v-html
|
5月前
|
JavaScript 前端开发
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
184 1
|
6月前
|
前端开发
react怎么做图片报错处理
react怎么做图片报错处理
77 1
|
7月前
|
前端开发
构建一个简单的React图片画廊应用
构建一个简单的React图片画廊应用
152 0
|
7月前
|
前端开发 JavaScript
react中img引入本地图片的方式
react中img引入本地图片的方式
287 0