在React中以编程方式检查img src

Question

I have a page with many customer logos on it in a table. One table cell tries to get the logo like this:

<TableCell className={classNames(classes.urlDealCell, classes.dealCell)}>
    {this.getLogo(deal.CompanyWebsite)}
</TableCell>

getLogo is:

getLogo = url => {
  const source = `https://logo.clearbit.com/${url}`;
  return <img src={source} width="30" />;
};

80% of the time, the logo comes back fine, and if there is no deal.CompanyWebsite , I can provide a default logo. But I need to handle another edge case:

If the request to the img source fails with a URL like this: https://logo.clearbit.com/absoluteGarbage , can I somehow check this in React and fallback to the default logo?

Must I try a GET request to the src URL for each logo before trying to assign the src attribute of the img ? If so, this would double the number of image requests, which would suck for larger page result sets.

Answer 1

  <img src={someurl} 
   onError={(e)=>{e.target.onerror = null; e.target.src="image_path_here"}}/>

When an image fails to load, onError gets called. Use this function to do your logic

Answer 2

Use the onError attribute:

<img src="https://logo.clearbit.com/absoluteGarbage"
     onError={event => event.target.src=defaultUrl} />

JSFiddle: https://jsfiddle.net/g1wubsLm/1/