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
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.
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>
thank you man
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
stackoverflow.com/a/68838835/7757900
with a little changes
I have used layout = "responsive" with width = {500} height = {270}
That was very helpful. I was struggling to hide and show images responsively. Now, I got a couple of great image components to use.
Thanks, very useful! XD
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!
thanks man
This destroys the cumulative layout shift features of Next/Image priority tag