The Best Way to Load Images in React | Blurhash

Loading images in React, or more generally any web technology, can be full of latency and can give you website a lagging loading feeling. We can fix this problem using a Blurhash that we temporarily render that represents a low res color gradient of the image. It makes for an amazing loading experience and allows the user to expect the image to come, improving user retention on your site. In this tutorial we find out exactly how it's done.

#React #programming #javascript

🔗 Resources

🔥 Get More Content - Subscribe and click le notification bell to stay tuned for all the fun & exciting tutorials to come!

🔖 Topics Covered

- Image loading in React
- Blurhash images
- React blurhash

[alexg]

Awesome video! Used your approach in my project! Also added a spinner over the blurhash so it's more apparent for the user that the image is still being downloaded

[_.keviv._]

what If I am fetching a bunch of images through an API??

[bhanubhatt]

what if i will get the src URL from the API which is secured and i can't share it with blur - hash website

[coffee]

I have a recipe app, just for home use. When i add a new recipe with a form to firestore i also upload an image to firebase storage. Is it possible to create a blurhash code when the file is uploaded and then save that with the recipe information in firestore like i store the imageurl also?

[bhanubhatt]

Its not working for me when i created an Image Loader component and the src for the img tag is giving error stating : [object object
] in place of the string URL value

[jayeobavictor]

Great video but what if I want to display multiple images with different url

[shaiksuleman]

What happens in the case we are making an api call to get some images and still want to show this hash effect

[fnandesrafael]

Did anyone found out, how to handle api images? Like, some package or way to enconde an image url to a blurHash? Because in real life, we are not going to mannually upload and encode images in that site. What I'm trying to do is before render an api data, get those image url's, encode and render it before the real image loads. Anyone got an idea?

[peche_ead]

maliiisimooo..! para eso muestro loading component y listorti!