Currently, layout="responsive" requires you to set width and height which you don't want to set because you don't know what the aspect ratio is goi...
For further actions, you may consider blocking this person and/or reporting abuse
thanks dude
layout="fill" is deprecated. use fill={true} instead as follows:
<div className={'image-container'}><Image src="IMAGE_SOURCE" className="image" fill={true} alt="ALT_TEXT"/>
</div>
Any reason you use curly braces in className? It is just a string so you can use just a string without curly braces. Good article this helped me fixing a problem I had!
I'm guessing it's so it's easier to refactor to using string interpolation.
thank you man
Thanks! been struggling with refactoring a component that was using "responsive", this hgave me the perfect grounds to find a solution. cheers!
This saved me from a layout hell. Thanks so much!
stackoverflow.com/a/68838835/7757900
with a little changes
Thanks, very useful! XD
That was very helpful. I was struggling to hide and show images responsively. Now, I got a couple of great image components to use.
I have used layout = "responsive" with width = {500} height = {270}
With the above fix backdrop-filter: blur(5px); stopped working on a div that overlays on the image. Issue is only with Chrome and Firefox but on Safari it works
thanks man
This destroys the cumulative layout shift features of Next/Image priority tag