Альтернативный источник изображения в Javascript / React

Question

У меня есть приложение, которое отображает изображения из API. Однако некоторые элементы не имеют требуемого backdrop_path.

Как бы я отображал другое изображение, если оригинал недоступен

Вот мой код

const MovieItem = ({ movie }) => {
  const imagePath = 'https://image.tmdb.org/t/p/w500';

  return (
        <img src={`${imagePath}${movie.backdrop_path}`} alt={movie.title} />

Я хочу, чтобы img был {mov ie .poster_path}, но только если {mov ie .backdrop_path} является нулевым или не существует.

Или альтернативно для отображения вместо него жестко закодированное изображение.

Answer 1

Вы можете использовать условные пути, как это:

const MovieItem = ({ movie }) => {
  const imagePath = 'https://image.tmdb.org/t/p/w500';
  const src = ${movie.backdrop_path} === null || ${movie.backdrop_path} === 
              undefined ? {movie.poster_path} : ${movie.backdrop_path} 

  return <img  src={src} alt={movie.title} />
}

Answer 2

<img src={`${imagePath}${movie.backdrop_path || movie.poster_path}`} alt={movie.title} />

Вы можете использовать условные операторы для изображений.

Answer 3

вы можете попробовать использовать событие img onerror, оно будет запущено, если не удалось загрузить ресурс.