在React中，图片加载失败时，可以通过onError事件处理器来捕获错误并进行处理。以下是一个简单的例子：
jsx复制代码
import React from 'react'; |
|
class ImageComponent extends React.Component { |
|
handleImageError = (event) => { |
|
event.target.onerror = null; // 防止在错误处理函数中再次触发错误 |
|
event.target.src = 'fallback-image.jpg'; // 设置一个备用图片 |
|
// 还可以在这里添加其他的错误处理逻辑，比如显示错误信息或者发送错误报告等 |
|
} |
|
render() { |
|
return ( |
|
<img src={this.props.src} onError={this.handleImageError} alt={this.props.alt} /> |
|
); |
|
} |
|
} |
|
export default ImageComponent; |
在上面的例子中，我们创建了一个名为ImageComponent的React组件，它接收src和alt作为props。当图片加载失败时，onError事件会被触发，然后调用handleImageError方法。在handleImageError方法中，我们首先通过event.target.onerror = null来防止在错误处理函数中再次触发错误。然后，我们将图片的src属性设置为一个备用图片的路径。这样，当原始图片加载失败时，就会显示这个备用图片。
你可以根据需要修改handleImageError方法，添加其他的错误处理逻辑。比如，你可以显示一个错误信息，或者发送一个错误报告到服务器等。
另外，你也可以使用函数组件和Hooks来实现同样的功能：
jsx复制代码
import React from 'react'; |
|
const ImageComponent = ({ src, alt }) => { |
|
const handleImageError = (event) => { |
|
event.target.onerror = null; |
|
event.target.src = 'fallback-image.jpg'; |
|
} |
|
return ( |
|
<img src={src} onError={handleImageError} alt={alt} /> |
|
); |
|
} |
|
export default ImageComponent; |
这个函数组件版本的ImageComponent和类组件版本的功能是一样的，只是使用了不同的语法和结构。
