react+ts,图片发生错误设置onError

最新推荐文章于 2024-05-05 21:16:31 发布

像素之间

最新推荐文章于 2024-05-05 21:16:31 发布

阅读量227

点赞数 3

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/xiaocaihenmimang/article/details/138077030

版权

本文介绍了如何在使用React和TypeScript开发时，利用onError事件处理图片加载失败的情况，将图片替换为默认的占位图。

摘要由CSDN通过智能技术生成

react+ts,图片发生错误设置onError

 onError = (event:any)=>{
   event.currentTarget.src = './lib/images/wutupian.png';  
}


 <img  
 key={index}  
  src={image}  
  alt={`Image ${index + 1}`}
  onError={this.onError}
  style={{ marginRight: '10px' }}  
/>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

像素之间

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

react+ts配置eslint+prettier

baidu_38027860的博客

06-09

1494

webpack的eslint插件，在webpack.config.js中注入该插件扩展，可以在webpack进行编译前，先进行eslint语法检查，将eslint的错误输出到终端，不会影响到webpack编译结果。eslint配置的ts解析器，需要先配置上解析器，eslint才能正确对ts语法进行检查，需要先按照上解析器，@typescript-eslint/eslint-plugin才能使用。因为项目是ts + react，所以需要额外安装ts和react的扩展，依赖的npm包如下。

Taro（React+TS）基于InnerAudioContext封装一个基本的音频组件（uni-app（vue）后续更新）

Senar的博客

07-25

936

为什么要封装一个音频组件主要因为微信小程序官方的audio不维护了，并且在很多iOS真机上确实也存在点击无法播放，总时长不显示等问题. 音频组件的要求与限制点击播放或者暂停显示播放进度及总时长通过图标变化显示当前音频所处状态（暂停/播放/加载中）页面音频更新时刷新组件状态全局有且只有一个音频处于播放状态离开页面之后要自动停止播放并销毁音频实例材料： icon_loading.gif icon_playing.png icon_paused.png InnerAudioContext提供

参与评论您还未登录，请先登录后发表或查看评论

图片加载失败，img触发错误显示默认图片

qq_52666510的博客

03-30

3603

<img src='要显示的图片路径' onError={(e) => {e.target.onerror = null;e.target.src="占位图片路径"}} /> onError：当图片加载出现错误，会触发。经常在这里事件里头写入将图片导向默认报错图片，以免页面上出现红色的叉叉或者出现图片破裂的图标。但是如果备用图片也错误了，就会造成死循环的问题，前端就可能挂掉，这时候再添加上onerror = null就好。 react中可以用上面这个 onerror 原生的.

tsx/typescript文件引入图片报错

将心_的博客

07-19

5478

typescript中引入图片报错对于react来说在js文件中直接这样导入是没有问题的，但是在ts文件中这样导入就会报错了，这是因为ts本身会有静态检查，而ts只会检查代码文件，对于非代码文件是无法识别的。解决：声明一个特殊的ts文件：img.d.ts 然后在这个ts文件中声明图片格式： /* * ts图片声明导入文件 */ declare module '*.svg' declare module '*.png' declare module '*.jpg' declare m

react+ts导入图片，找不到模块“......logo.png”或其相应的类型声明。

qq_43662579的博客

02-01

1650

【代码】react+ts导入图片，找不到模块“......logo.png”或其相应的类型声明。

react实现img的onerror

weixin_34355881的博客

06-29

2016

import React from 'react'; import {Link} from 'react-router'; import ContactStore from '../stores/ContactStore' import ContactActions from '../actions/ContactActions'; cl...

react 加载img 出错使用onError事件

caoyan0829的博客

10-11

8231

{ title: < div className = { styles.tableTeCenter } > 图片 < /div>, dataIndex: 'images', width:240, sorter: (a, b) => (a.createDate || 0) - (b.createDate || 0), rende...

react 默认图片 onRerror

xiaokanshijie的博客

06-16

145

onError={(e)=>{e.target.src=require('@/assets/id2.png')}}

用react+ts和Redux-Toolkit写一个简单的例子

最新发布

10-09

然后创建基本文件结构，如`store.ts`用于设置Redux store，`actions.ts`用于定义action creators，`reducer.ts`负责处理state的变化，`components`目录下有`App.js`作为入口组件。 **store.ts** ```typescript // ...

2401_84435555的博客

05-05

970

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。这里，我们首先导入组件和。

React +ES6 +Webpack入门

u013481204的博客

07-15

2221

React +ES6 +Webpack入门React已成为前端当下最热门的前端框架之一，其虚拟DOM和组件化开发让前端开发更富灵活性，而Webpack凭借它异步加载和可分离打包等优秀的特性，更为React的开发提供了便利。其优秀的特性不再赘述。本文将详细的记录react babel webpack的环境搭建，以及搭建的过程中遇到的一些坑。一、新建React项目 1、如图为新建react项目结

React 图片加载失败调用onError显示默认图

XWQsharp的博客

08-14

2207

React 图片加载失败调用Error显示默认图 // 只调用一次onError 防止默认图加载不出来导致死循环 import React, { useState } from 'react' function App() { const [isError, setIsError] = useState(true) const url = 'https://th.wallhaven.cc/lg/dg/xxxx.jpg'; const defaultImg = 'https://th.wallhaven

react怎么做图片报错处理

qq_60504665的博客

04-28

580

方法，添加其他的错误处理逻辑。比如，你可以显示一个错误信息，或者发送一个错误报告到服务器等。属性设置为一个备用图片的路径。这样，当原始图片加载失败时，就会显示这个备用图片。和类组件版本的功能是一样的，只是使用了不同的语法和结构。事件处理器来捕获错误并进行处理。来防止在错误处理函数中再次触发错误。在React中，图片加载失败时，可以通过。在上面的例子中，我们创建了一个名为。的React组件，它接收。事件会被触发，然后调用。方法中，我们首先通过。

解决React 的＜img ＞src使用require的方式图片显示不出来或者音频显示不出来，展示的是[object Module]的问题

m0_72958893的博客

10-09

1300

当我们用单文件写组件时，在 script 标签内使用的是 ES6 的语法且使用 export default 进行默认导出。然而，require 是 CommonJS 的模块导入方式，不支持模块的默认导出，因此导入的结果其实是一个含 default 属性的对象，因此需要使用 .default 来获取实际的组件。相反，如果文件中使用 CommonJS 或 AMD 模块化语法，使用 module.exports 对象进行导出，那么使用 require 导入时就不需要使用 .default 来获取。

在react项目中引入本地图片不生效问题

weixin_58350627的博客

05-17

1564

在学习react项目的时候遇到图片不生效的问题。使用require导入图像。需要加一个default <img src={require('./images/headers/xxx.png').default} alt="" /> 使用import导入(推荐) import logoImg from "./images/logo/logo.png" <img src={logoImg} alt=""/> ...

react使用require图片无法加载

认定的总要想办法去完成。

04-29

1114

踩坑记录在react中使用require进行导入本地图片时，无法显示图片，仔细检查发现图片的base64编码是在default属性里面，如下：顾在此进行require进行引入图片时，加入default即可，代码如下： <img src={require("./images/1.png").default} alt=""/> 加入.default后图片进行正常显示，踩坑结束。 ...

img标签的onerror事件

weixin_40719714的博客

10-17

1941

有时，img标签中的src图片加载失败，原来的图片位置会出现一个碎片图标，用户体验会下降。通过百度，可以给img标签加背景图片，代码如下： .headLogo img{ display: block; width: 270px; height: 60px; background: url(../images/logo.png) no-repeat 0 ...

img标签的onerror事件（应用以及注意事项）