How to show Images SMOOTHLY with Next.js 13 Image Component
How to show Images SMOOTHLY with Next.js 13 Image Component
In this tutorial video, I will be showing you how to use the Next.js Image element to load images seamlessly on your website. With the help of this powerful tool, you can ensure that your images are optimized and load quickly, without compromising on quality.
❤️ Subscribe to my channel / @sakuradev
Content
0.06 -> hey what's going on developers today I'm
going to show you a really simple trick
4.44 -> that we can use with next.js in order to
load images smoothly, so this is how we
10.44 -> load images normally (...instantly...) but if
you want to load images smoothly just like this
18.66 -> watch this very short video till the end so let's
go to vs code and here as you can see we have
26.7 -> a next image which comes from the next/image
and these two lines of code make the loading
34.08 -> of the image smoothly so in the class name I
set a transition and opacity change I'm using
40.2 -> TailwindCSS for this but you can do it with
whatever the CSS framework you want even in
44.76 -> vanilla CSS and then set the opacity to zero and
then set the duration for the transition. I set
51.66 -> it to 2 seconds in order for you to see it better
and then the next image has an onLoadingComplete
58.2 -> callback function that is called whenever the
loading of the image is complete it has a one
64.68 -> argument that is a reference to the underlying
image element so in this callback function we just
72.18 -> remove the "opacity-0" from the class list of the
image and that's it with these two lines of code
78.96 -> you can load your image smoothly in next.js just
like this so if you enjoyed this video and want to
89.04 -> see more content like this make sure to subscribe
to my channel and hit the like button bye bye
Source: https://www.youtube.com/watch?v=GG66vQgc1Vg