How To Check And Resolve Broken Images In React JS

Most Frontend and JS developers are shifting to ReactJS. At the beginner level, they face some primary issues and get panic.

I have addressed one of the most common issues of “broken image in ReactJS” to help beginners. The error appears in several ways, like a missing image key or a broken image in the database.

We will discuss the solution to these errors one by one.

Starter Code

import './blogs-module.css'

const blogs = [
  {
    id: '01',
    title: 'How to learn Javascript',
    cover:
      'https://images.unsplash.com/photo-1648737966769-98fa88fe66bb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80',
  },
  {
    id: '02',
    title: 'ReactJS beginners guide',
    cover:
      'https://images.unsplash.com/photo-6f2b6890edc5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80',
  },
  {
    id: '03',
    title: 'HTML semantic tags',
    cover:
      'https://images.unsplash.com/photo-1655838774838-4a1322530d52?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzNHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60',
  },
  {
    id: '04',
    title: 'Customize Radio Button',
  },
]

function Blogs() {
  return (
    <div className="container blogs-page">
      <h2 className="page-title">Popular Blogs</h2>
      <div className="blog-section">
        {blogs.map(({ id, title, cover }) => (
          <div className="blogs" key={id}>
            <img src={cover} alt="cover image" />
            <h3>{title}</h3>
          </div>
        ))}
      </div>
    </div>
  )
}

export default Blogs

Find the broken image in ReactJS

Before diving into the solutions, let us first find the problem of broken images. In the code, we have a blog component that renders a blog cover with a title, like a blog card. The resulting image shows that the 2nd and 4th blog card images are broken.

On the 2nd card, the image URL is incorrect or broken, while on the 4th, we cannot get the image key from the database. So, we will show a placeholder instead of a broken image.

Solutions to Broken image problems

1. Fix the no-image key issue

To resolve this issue, first, define a variable placeholderImage.

We have fixed it by just adding a ternary operator in the image. We said if cover is there use cover otherwise placeholderImage.

That’s it; see the result of the 4th card, and the issue is resolved. When it can't find the image, it'll use the placeholder.

function Blogs() {
  const placeholderImage =
    'https://images.unsplash.com/photo-1597484661973-ee6cd0b6482c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80'

  return (
    <div className="container blogs-page">
      <h2 className="page-title">Popular Blogs</h2>
      <div className="blog-section">
        {blogs.map(({ id, title, cover }) => (
          <div className="blogs" key={id}>
            <img src={cover ? cover : placeholderImage} alt="cover image" />
            <h3>{title}</h3>
          </div>
        ))}
      </div>
    </div>
  )
}

export default Blogs

2. Fix the broken image URL issue

In the previous case, we were not getting a cover image from the database. Here, we have image values, either broken, incorrect, or empty. The img tag in React takes a prop onError function that runs when the image URL is broken.

In the onImageError function, we have replaced image src with placeholderImage to fetch the placeholder.

const Blogs = () => {
  const placeholderImage =
    'https://images.unsplash.com/photo-1511285605577-4d62fb50d2f7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=876&q=80'

  const onImageError = (e) => {
    e.target.src = placeholderImage
  }

  return (
    <div className="container blogs-page">
      <h2 className="page-title">Popular Blogs</h2>
      <div className="blog-section">
        {blogs.map(({ id, title, cover }) => (
          <div className="blogs" key={id}>
            <img
              src={cover ? cover : placeholderImage}
              alt="cover image"
              onError={onImageError}
            />
            <h3>{title}</h3>
          </div>
        ))}
      </div>
    </div>
  )
}

export default Blogs

Add CSS to the Component

It is not a mandatory step but we can add it to beautify the web app

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');

body {
  box-sizing: border-box;
  color: #220f5f;
  font-family: 'Poppins', sans-serif;
}

.container {
  width: 100%;
  max-width: 1000px;
  padding: 0 15px;
  margin: 0 auto;
  margin-top: 70px;
}

.blogs-page {
}

.page-title {
}

.blog-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

.blogs {
  border: 1px solid gainsboro;
  border-radius: 4px;
}

.blogs img {
  width: 100%;
}

.blogs h3 {
  padding: 5px 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
}

If you have learned something new, share it with your friends.

How To Check And Resolve Broken Images In React JS

Starter Code

Find the broken image in ReactJS

Solutions to Broken image problems

1. Fix the no-image key issue

2. Fix the broken image URL issue

Add CSS to the Component

Read Next

Create an Editable Text Field in a Table Using ReactJS [Learn the Trick]

How To Fix Styled Components Prop Types Issue In Typescript

Ship your startup in days, not weeks