onError for <img> to hide images with error

(Francis Kim) #1

I have tried various different methods to hide the img tag when there is an error:

foo: function(event) {
	// get element from event and hide

render: function() {
    return (
    <img onError={} src={src}/>

Also another way which returned me the window object and not the event, and another way that just didn’t event trigger at all.

I’m trying to hide any images that error for any reason as I get an ugly ‘broken image’ icon.

(Sophie Alpert) #2

You can do a state update which will cause a rerender. Something like:

getInitialState: function(event) {
  return {errored: true};

handleError: function(event) {
  this.setState({errored: true});

render: function() {
  if (this.state.errored) {
    return null;
  } else {
    return <img onError={this.handleError} src={src} />;

(Francis Kim) #3

Thanks for your reply @spicyj - I have not written it in the snippet however I am using .map() to iterate through a JSON array as I have multiple images. Will your method still work if that’s the case? I’m happy to try restructure my code a bit.

(Francis Kim) #4

@spicyj this is the non-simplified code, sorry. Not sure if it would work here due to the scope of this?

    imageError: function() {
        this.setState({error: true});

    render: function() {

        var childElements = {
            if(item.url) return (
                    <div className="card">
                        <a href={item.url}>
                            <img onError={this.imageError} src={src}/>
        return (
                <div className="card-columns">


(Sophie Alpert) #5

You can wrap the logic in your own <ImageThatDisappearsOnError /> component and write it exactly as I suggested it (or you could store in your state a map of whether the image has errored for each item, but making a component to encapsulate this logic is simpler).

(Francis Kim) #6

@spicyj - I’ll give that a shot. Thanks for all your help. :smile:

(Francis Kim) #7

that worked a treat, much thanks to @spicyj

(Skay) #8

Hi guys. Can’t get it work with React 0.14.7. I’ve got simple stateless component as this and error handling doesn’t work:

() => (
  <img onError={() => { console.log('error') }}  src="..." />

In the same time other events like onClick work as expected.
Where is pitfall?

(Skay) #9

We have figured out why it happens. We have SSR (server side rendering) which serves <img> tags as a resulting markup, then on the client side Error/Load events occur prior React initialization on the client side… As a fix we’ve done a custom <Img> component which check if image loaded/has errors and emit appropriate events.

(nick bouton) #10

thanks @spicyj, that did the trick. defaulted the initial errored state to false, other than that, nice and simple solution.

(Dangchithao) #11

(Vladimir Tsyganov) #12

We run into the same issue with SSR. Could you provide some details about your solution?

(Sean Matheson) #13

To support SSR instead of binding to the onError prop you could have a componentDidMount implementation that does something like the following:

    const imgLoader = new window.Image()
    imgLoader.onload = () => this.setState({ failed: false })
    imgLoader.onerror = () => this.setState({ failed: true })
    imgLoader.src = this.resolveSrc(src)

Just make sure you bind your onload and onerror handlers before setting the src otherwise they may not fire.