React Load hashed image from data while loading Image

Question

I m making a project with react and which i get the data from a JSON file. I load an image with URL

<img src={image} />

and I have a hashed image(blurred) in my data which i want to display while waiting to render the real image. Any what to do this?

JSON is like:

"hash": "UUKJMXvM{V@AHRQwvxZXSs9s;o0",
"image": "https://www.imageurl.com/",

Answer 1

You can use react-progressive-image which is a npm package used for progressive image loading. You can install it using:

npm i react-progressive-image

And then use it like:

<ProgressiveImage src={image} placeholder={hash}>
  {src => <img src={src} alt="an image" />}
</ProgressiveImage>

Hope this will help you.