时间戳

首页 > 解决方案 > 查找文件夹中是否存在图片，如果不存在则渲染库存图像

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

问题描述

我有一个包含所有以代码命名的葡萄酒图像的文件夹（即：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' />
      }

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

标签： javascriptreactjsternary-operator

解决方案

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

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

请注意，重要的是在onerror事件发生时将其无效，以避免在库存图像加载失败的情况下出现无限循环。

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

推荐阅读