Image error handling in ReactJs

ReactJS, 2016-03-31 03:36:48 UTC

Today I am dealing with image error. The main reason to check an image error is 'image not found'. When this error image rendered, the page looks ugly.

This is like trivial problem with server side script. But for client side script, it is tricky. 

Here is how to handle it in ReactJS;

var Img = React.createClass({
    getInitialState() {
        return {
            theSrc: this.props.theSrc,
            theClass: this.props.theClass
        };
    },

    render() {
        return (
            <img src="{this.state.theSrc}" alt="" />
        );
    },

    componentDidMount() {
        var img = new Image();
        img.onerror = function() {
            this.setState({
                theSrc: '/upfiles/default.png'
            });
        }.bind(this)
        img.src = this.state.theSrc;
    }
});

Share: