Нахождение, если изображение существует в папке и рендеринг изображения, если нет

Question

У меня есть папка с изображениями всех вин, названных по коду (например, FMP-HTR17), и я хочу отобразить соответствующее изображение, если оно существует, но если изображение не в папке, я хочу сделать запас вместо фото.

Прямо сейчас у меня есть троичная операция, которая, я думал, вернула бы false, если изображение не было в папке, но, поскольку у меня есть код для wine, оно возвращает 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

Как проверить наличие неработающих изображений в React JS

Ранее я не знал о onError, очень полезно!Пример выше работал для меня.

Answer 2

Для изображения, я думаю, вы можете использовать событие onerror.

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

Обратите внимание, что важно аннулировать событие onerror, когда оно происходит, чтобы избежать бесконечного цикла в случае сбоя загрузки исходного изображения.

Вы можете посмотреть в этом ответе, откуда я взял пример выше: Как использовать атрибут onerror элемента img