Progressive Enhancements for Loading Images Using React Image

William Le

In this article, you’ll learn about React Image, a library focused on providing progressive enhancements for loading images in React.

Oh, the dreaded broken image url!

image not found graphic

Nobody likes seeing that! As a web developer I’m always slightly embarrassed when I discover an image isn’t loading properly on my websites.


Using a library like React Image solves these problems by elegantly substituting fallback images for broken images, as well as letting you define loading animations when your images take a while to load.

🐊 Alligator.io recommends

Recommended React and GraphQL course

Basic Usage

Let’s get started by installing it:

$ npm install react-image

React Image has sophisticated features, yet has a very simple interface:

import Img from 'react-image';

class Foo extends Component {
  render() {
    return (
      <Img
        src={/* image path or URL*/}
        loader={/* React Component that's shown before "src" is loaded*/}
        unloader={/* React Component shown if "src" fails */}
      />
    )
  }
}

The only required prop is src. The other two props are optional, and accepts any valid JSX Element component (eg., plain HTML, or React component).

Here’s a demo that only uses the src prop:

import React, { Component } from 'react';
import Img from 'react-image'

class App extends Component {
  render() {
    return (
      <div>
        <strong>The Book of Random Images!</strong>
        <Img
          src="https://picsum.photos/200"  // 3rd-party image url
        />
        <button onClick={window.location.reload}>Reload Page</button>
      </div>
    );
  }
}

If you inspect the HTML markup, the react-image component simply uses a <img> tag. I’m pleasantly surprised that there isn’t an excessive reliance on <div> tags create the fancy features in react-image! They’ve kept it the HTML markup very minimal, and semantic.

Using the loader Prop

Let’s define the loader prop! When loading images that are large, it’s a good idea to provide a loading animation (via a loading gif, or something similar) so that users aren’t wondering 🤔 what your webpage is doing.

To see the loading gif, click on the “Reload Page” button. You should see a brief loading animation!

<Img
  src="https://picsum.photos/200"           {/* 3rd-party image url */}
  loader={<img src="images/loading-gif"/>}  {/* locally-hosted image */}
/>

Since the loading gif is locally-hosted, it’ll load before any 3rd-party hosted images. This gives users immediate visual feedback that they’ll appreciate!

Providing a Fallback Image

There will be times when images aren’t able to load. Using React Image you can easily define a fallback image that will be substituted for the src image:

<Img
  src="https://facebork.com/image.jpg"
  loader={<img src="images/loading-gif"/>}  
  unloader={<img src="images/sad-face.png"/>}  {/* 👈 lightweight, locally-hosted fallback image */}
/>

Nice! Now if something unexpected happens with images in your React app, you can still provide a slick user experience!

React Image also caches bad requests preventing additional requests for an image that's broken.

Wrapping Up

React Image provides powerful utilities for loading images. When you provide fallback images and loaders, users will appreciate the care that you’ve put into your app. Give it a try, and boost the user experience for your React apps!

Visit the Github page to view documentation on React Image.

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#