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
  • 103,356
  • 8
  • 183
  • 231
Kev
  • 79
  • 2
  • 6

1 Answers1

0

Use the onerror attribute:

              <img
                src={require(`../images/${imgPath}.png`)}
                alt=""
                onerror="this.src='../images/default.png'"
              />
Barmar
  • 669,327
  • 51
  • 454
  • 560
  • 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