Hi, I understand that Image component in Next/Image is annoying. Sometimes it needs width and height predefined and still we fail to get a responsive image according to our need.
Here is a fix to to make Image component responsive in Next JS 13.
All you need to do is wrap the Image Component into a <div> component and write the Image component in this way
import dummyImage from "IMAGE_PATH"
<div className='w-full max-w-xs'>
<Image
alt="responsive_image"
src={dummyImage}
sizes="100vw"
width={IMAGE_WIDTH}
height={IMAGE_HEIGHT}
style={{
width: '100%',
height: 'auto',
}}
priority="blur"
/>
</div>
JSXHere are a few things to notice:
- I am using NextJS 13 with Tailwindcss
- Make sure to import your image and use the imported image (imported as dummyImage ) in the src. Avoid writing IMAGE_PATH in src attribute. I don’t know why it throws error to me while doing the opposite.
- To make image responsive, change the styles of wrapper <div> element. Like I have given it a max-w-xs (max-width: 20rem; /* 320px */).
- You can change the responsive styles of the <div> element, the Image will be resize just like the <div>.
If you face any problem, let me know.
Thanks.