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
Here 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.