In my create-react-app I have cards that display server-side images and I want to use a dummy image when no server-side image is returned. It seems that 'onError' event is never triggered. Here is my code:

import React from 'react';
import notfound from '../../icons/notfound.png';

class Card extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        open: false
    }
}

addDefaultSrc(ev){
    ev.target.src = {notfound};
    ev.target.onerror = null;
}

render(){
    return (
        <div>
           <div><img className="item-photo" onError={() => this.addDefaultSrc} src={url} alt=""></img>
           </div>
        </div>
    );
}

and CardsList

    return (
         <Card
             key={i}
             id={item.No}
             url={`http://***.***.*.*:3000/${item.No}.JPG`} 
         />

Although I am getting 404 error (Not Found) when there is no image to be displayed, onError event is not triggered. Any help would be much appreciated.

In my create-react-app I have cards that display server-side images and I want to use a dummy image when no server-side image is returned. It seems that 'onError' event is never triggered. Here is my code:

import React from 'react';
import notfound from '../../icons/notfound.png';

class Card extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        open: false
    }
}

addDefaultSrc(ev){
    ev.target.src = {notfound};
    ev.target.onerror = null;
}

render(){
    return (
        <div>
           <div><img className="item-photo" onError={() => this.addDefaultSrc} src={url} alt=""></img>
           </div>
        </div>
    );
}

and CardsList

    return (
         <Card
             key={i}
             id={item.No}
             url={`http://***.***.*.*:3000/${item.No}.JPG`} 
         />

Although I am getting 404 error (Not Found) when there is no image to be displayed, onError event is not triggered. Any help would be much appreciated.

• javascript
• reactjs
• onerror

Share Improve this question Follow asked Mar 4, 2019 at 8:58 MorganaMorgana 33711 gold badge99 silver badges2222 bronze badges 1

• 1 It'd be better to define addDefaultSrc as an arrow function. Then you may pass it without binding: onError={this.addDefaultSrc} – hindmost Commented Mar 4, 2019 at 9:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You're not actually calling the function. Try one of these two options:

onError={this.addDefaultSrc} or onError={(e) => this.addDefaultSrc(e)}