关于react加载失败时的问题

Question

react加载图片失败时整个页面会白屏，我想用另一个图片替代，百度之后说要用onError,但是还是不行，我也不知道是哪里出现的问题？

import React,{Component} from "react";
class Ceshi extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            imgSrc:'product01.jpg',//正确图片路径
            errorSrc:'product0.jpg'//错误路径
         };
    }
    render() {
        return (
            

                <img src={require('../assets/images/'+this.state.errorSrc)} 
                alt="img"
                 style={{width:"200px"}}
                 onError={(e) => {e.target.onerror = null;e.target.src=require("../assets/images/product02.jpg")}}
                />
            
        );
    }
}

export default Ceshi;

浏览器报错就是找不到图片

问题2：为什么我打开几个页面之后，如果一个页面报错无法显示，其他的页面都报同样的错误而无法显示？

Answer 1

望采纳！！点击该回答右侧的“采纳”按钮即可采纳！！
1.首先，你需要确保错误路径的图片是真的不存在。如果是图片路径的问题，那么在onError事件中设置e.target.src=require("../assets/images/product02.jpg")是不会生效的。

2.其次，你可以尝试在onError事件中打印一下e.target.src和e.target.onerror，看看他们分别是什么。如果e.target.src是正确的图片路径，那么可能是图片本身的问题；如果e.target.onerror是null，那么可能是你在onError事件中没有将e.target.onerror设为null导致的。

3.最后，你可以尝试在onError事件中设置e.target.src为一个网络图片的地址，看看是否可以正常加载。这样可以判断是否是你的项目中的图片资源有问题。