Add an Enhanced img Element with react-image – an Example

The React img is just like the HTML version. It’s static and loads images synchronously.

Also, there’s no easy way to add fallback images or handle broken images, and there’s no way to lazy load images.

The react-image package provides all that in one easy to use package.

In this article, we’ll look at how to use react-image with some examples.

To use it, we first install it by running:

npm install react-image --save

Then we can use it by writing the following code:

import React from "react";
import Img from "react-image";

export default function App() {
  return (
    <div className="App">
      <Img src="https://images.unsplash.com/photo-1490750967868-88aa4486c946?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" />
    </div>
  );
}

The most basic way to use it is just like a regular HTML img element.

We just add the component and pass in the URL of the image to the src prop.

To add a fallback image, we can pass in an array of images, where the ones other than the first one are fallback images.

For instance, we can write:

import React from "react";
import Img from "react-image";

export default function App() {
  return (
    <div className="App">
      <Img
        src={[
          "https://images.unsplash.com/photo-1490750967868-88aa4486c946?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80",
          "https://images.unsplash.com/photo-1494271823928-a80211877d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
        ]}
      />
    </div>
  );
}

The second URL in the array in the src prop value would be the URL for the fallback image.

It takes a decode prop to prevent flashing before the image is loaded.

We can set decode to false to prevent the flash when it’s loading:

import React from "react";
import Img from "react-image";

export default function App() {
  return (
    <div className="App">
      <Img
        src={[
          "https://images.unsplash.com/photo-1490750967868-88aa4486c946?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80",
          "https://images.unsplash.com/photo-1494271823928-a80211877d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
        ]}
        decode={false}
      />
    </div>
  );
}

If we load an image restricted with a CORS policy, we can set the crossorigin prop to 'anonymous'.

The loader prop takes a React component to show when an image is loading.

We can write:

import React from "react";
import Img from "react-image";

export default function App() {
  return (
    <div className="App">
      <Img
        src="https://images.unsplash.com/photo-1490750967868-88aa4486c946?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
        loader={<p>Loading</p>}
        decode={false}
      />
    </div>
  );
}

To add lazy loading, we can use the VisibilitySensor component that’s built into the react-visibility-sensor package.

We can write:

import React from "react";
import Img from "react-image";
import VisibilitySensor from "react-visibility-sensor";

export default function App() {
  return (
    <div className="App">
      <VisibilitySensor>
        <Img src="https://images.unsplash.com/photo-1490750967868-88aa4486c946?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" />
      </VisibilitySensor>
    </div>
  );
}

to load the image only when it’s visible on the screen.

The react-visibility-sensor package is separate from react-image, so we have to run:

npm i react-visibility-sensor

to install it.

It’s easy to use react-image to add an enhanced HTML img element. As we can see from the examples, it’s just a matter of passing in a few props to use the enhanced features.

Also, we can use the react-visibility-sensor component to add lazy loading.