查找文件夹中是否存在图片，如果不存在则渲染库存图像

Question

我有一个包含葡萄酒图像的文件夹，所有图像都以它们的代码命名（即：FMP-HTR17），并且想要显示关联的图像（如果存在），但如果图像不在文件夹中，我想渲染库存照片。

现在我有一个三元运算，如果图像不在文件夹中，我认为它会返回 false，但由于我有葡萄酒的代码，它返回 true（显然）。但我不知道如何检查图像是否存在！

//   Finds image with Code if available:   
{ `/images/bottle/${this.props.Code}.png` ? <Image className="cardImage" src={`/images/bottle/${this.props.Code}.png`}/>
        :
        // Else renders Stock Image:
        <Image className="cardImage"src='/images/StockRED.png' />
      }

如何查看是否存在具有我要查找的名称的文件？

Answer 1

对于库存图片，我认为您可以使用onerror 事件。

<img src="invalid_link" onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';">

请注意，当onerror 事件发生时，它必须无效，以避免在股票图像加载失败的情况下无限循环。

你可以看看这个答案，我从上面的例子中得到：How does one use the onerror attribute of an img element

Answer 2

How to check for broken images in React JS

我以前不知道 onError，非常有帮助！上面的例子对我有用。