I am using Next.js and next/image to display images, but the CSS is not working inside it. The image is in SVG format and I have placed it in the public folder. I am using Tailwind CSS along with this.
<Image
className="mt-3"
data-testid="close-icon"
src="/CloseIcon.svg"
alt="Close Nav Bar"
height="24"
width="24"
/>
I am not sure why it is not working and it is not being reflected in the browser. Any help will be greatly appreciated!
Styling the next/image component's margins this way currently doesn't work. See relevant GitHub discussion for more details.
Internally to the next/image component, the <img> element and the elements that wrap it have inline styles that override certain values passed through className.
As a workaround, you can add a wrapper element and apply the margin styling to it instead.
<div className="mt-3">
<Image
data-testid="close-icon"
src="/CloseIcon.svg"
alt="Close Nav Bar"
height="24"
width="24"
/>
</div>
From Next.js 12.2.0, you can use the experimental next/future/image component instead. This new component renders a single <img> element without any additional wrappers by default, and is no longer constrained by the wrapper's styles override.
You can enable next/future/image in next.config.js.
module.exports = {
experimental: {
images: {
allowFutureImage: true
}
}
}
Juliomalves's answer is right, but I would prefer:
<div className="mt-3" height="24" width="24">
<Image
data-testid="close-icon"
src="/CloseIcon.svg"
alt="Close Nav Bar"
layout="fill"
/>
</div>
You also can use a little cheat:
import {motion} from "framer-motion";
<motion.img
className="mt-3"
data-testid="close-icon"
src="/CloseIcon.svg"
alt="Close Nav Bar"
height="24"
width="24">
Try this:
<div style='width:104px;height:104px;position:relative;'>
<Image
alt='Mountains'
src='/mountains.jpg'
layout='fill'
objectFit='contain'
/>
</div>
More on objectFit Here
Wrapping the image component in a div helps solve the issue for me. I can apply the class name to the div and everything works as it should.