2

I am working on a table where I need to return images in the first column. The below code works fine except if it doesn't find the image then I get an error.

I would like to check if the file exists and if it does not exist, to return a default image. How should I approach this?

Thanks,

              Cell: cellProps => {
                const imgPath = cellProps.row.ExternalID;
                return (
                  <img
                    src={require(`../images/${imgPath}.png`)}
                    alt=""
                  />
                );
              }
Kaiido
  • 123,334
  • 13
  • 219
  • 285
Kev
  • 99
  • 3
  • 6

1 Answers1

0

Use the onerror attribute:

              <img
                src={require(`../images/${imgPath}.png`)}
                alt=""
                onerror="this.src='../images/default.png'"
              />
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • Hi Barmar, thank you for answering, unfortunately this does not seem to work.. I'm still getting error message that my missing pictures can't be found. I am using react. Would you know why it doesn't work ? – Kev Mar 18 '19 at 01:55
  • Maybe react has its own error handler? – Barmar Mar 18 '19 at 01:56