Alternate image source in Javascript/React

Question

I have an app that displays images from an API. However some of the items don't have the required backdrop_path.

How would I display a different image if the original is not available

Here's my code

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

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

I want the img to be {movie.poster_path} but only if {movie.backdrop_path} is null or not existent.

Or alternatively a hard coded image to display instead.

see https://stackoverflow.com/questions/980855/inputting-a-default-image-in-case-the-src-attribute-of-an-html-img-is-not-vali — Jim Jin, Feb 27 '20 at 03:29
That does work thanks. Is there a way of having a third option of a hard coded image? — DGB, Feb 27 '20 at 03:48

score 1 · Accepted Answer · answered Jul 13 '21 at 22:08

here's an answer for React, using a ref to allow the component to modify the image's source if it errors (i.e. the image specified by prop 'src' doesn't exist). In this example the fallback image is hard-coded, but could also be a prop etc.

import { useRef } from 'react';

const imageWithFallback = ({ src }) => {
  const imgRef = useRef();
  const onImageError = () => imgRef.current.src="/fallback-image.png";
  return (
    <img ref={imgRef} src={src} onError={onImageError} />
  )
}

score 0 · Answer 2 · answered Feb 27 '20 at 03:27

0

you can try use img's onerror event, it will be fired when it failed to load the resource.

answered Feb 27 '20 at 03:27

Trần Hoàn

94
7

score 0 · Answer 3 · answered Feb 27 '20 at 03:29

You can use conditionally paths like this:

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} />
}

DGB · Answer 4 · 2020-02-27T06:24:00.687

0

You can use conditional statements for images.

edited Feb 27 '20 at 06:24

answered Feb 27 '20 at 03:34

DGB

1,252
2
16
32

please explain why – Patricio Vargas Feb 27 '20 at 06:06

Alternate image source in Javascript/React

4 Answers4