Image Fallback in React

Hey Gang, welcome to this article, here we'll be learning how to manage image fallbacks in react, so the first question that arises is what is image fallback and why do we need image fallback?

So let's get started and learn 🚀

What is a fallback image and why do we need that?

A fallback image is an image that is shown in case the image for the user doesn't exist anymore. So a few days back, I was working on this project where I had to display user images in cards, and I was getting the user data from an API, which is quite a common thing, but the data from the API was broken, and few of my images were not loading. I had an src for my image tag, but still, no image was showing, and an alt text was shown.

We encounter this situation many times, so we need to have a fallback image that needs to be displayed in place of the image we provided in case of any exceptions.

Image fallback in react

We can easily create fallback images, all we need is a piece of state so that we can re-render the image in case of any error and a fallback image URL.

Here is our ReactFallbackImage component, which contains an img tag and it receives src and alt as props.

function ReactFallbackImage({ src, alt }) {
  return (
    <>
      <img
        src={src}
        alt={alt}
        className='border border-black h-[300px] w-[300px]'
      />
    </>
  )
}

export default ReactFallbackImage

now we will create a piece of state that keeps the track of the error in the image, and create a variable that will contain the address of our fallback image.

import { useState } from 'react'

function ReactFallbackImage({ src, alt }) {
  const [imageError, setImageError] = useState(false)

  const fallbackSrc =
    'https://images.unsplash.com/photo-1522778034537-20a2486be803?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80'

  return (
    <>
      <img
        src={src}
        alt={alt}
        className='border border-black h-[300px] w-[300px]'
      />
    </>
  )
}

export default ReactFallbackImage

Now, we will update the imageError state to true in case of any error in the image using the onError function, and will create a condition in src attribute i.e if imageError is true our src will be fallbackSrc else it will be src.

import { useState } from 'react'

function ReactFallbackImage({ src, alt }) {
  const [imageError, setImageError] = useState(false)

  const fallbackSrc =
    'https://images.unsplash.com/photo-1522778034537-20a2486be803?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80'

  return (
    <>
      <img
        src={imageError ? fallbackSrc : src}
        alt={alt}
        className='border border-black h-[300px] w-[300px]'
        onError={(e) => {
          setImageError(true)
          e.currentTarget.src = fallbackSrc
        }}
      />
    </>
  )
}

export default ReactFallbackImage

Now we can see the fallback image in place of that boring alt text.

Thank you for reading, I hope it helped you out!, I'll appreciate your feedback and doubts in the comments section if there are any. Happy Coding 🚀

Wishing you all the best in further learning 🚀