我正在使用 Next.js 并next/image显示图像，但 CSS 在其中不起作用。该图像采用 SVG 格式，我已将其放在公共文件夹中。我正在使用 Tailwind CSS。
<Image
className="mt-3"
data-testid="close-icon"
src="/CloseIcon.svg"
alt="Close Nav Bar"
height="24"
width="24"
/>
我不确定为什么它不起作用并且它没有反映在浏览器中。任何帮助将不胜感激！
以next/image这种方式设置组件样式目前不起作用。有关更多详细信息，请参阅相关的GitHub 讨论。
作为一种解决方法，您可以添加一个包装元素并将样式应用到它。
<div className="mt-3">
<Image
data-testid="close-icon"
src="/CloseIcon.svg"
alt="Close Nav Bar"
height="24"
width="24"
/>
</div>
Juliomalves 的回答是正确的，但我更愿意：
<div className="mt-3" height="24" width="24">
<Image
data-testid="close-icon"
src="/CloseIcon.svg"
alt="Close Nav Bar"
layout="fill"
/>
</div>
你也可以使用一个小技巧：
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">
试试这个：
<div style='width:104px;height:104px;position:relative;'>
<Image
alt='Mountains'
src='/mountains.jpg'
layout='fill'
objectFit='contain'
/>
</div>
更多关于objectFit 这里