下一个图像不采用类属性

Question

我正在使用 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"
/>

我不确定为什么它不起作用并且它没有反映在浏览器中。任何帮助将不胜感激！

Answer 1

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">

Answer 2

以next/image这种方式设置组件样式目前不起作用（请参阅https://github.com/vercel/next.js/issues/18585）。

作为一种解决方法，您可以添加一个包装元素并对其应用样式。

<div className="mt-3">
    <Image
        data-testid="close-icon"
        src="/CloseIcon.svg"
        alt="Close Nav Bar"
        height="24"
        width="24"
    />
</div>

Answer 3

尝试这个：

<div style='width:104px;height:104px;position:relative;'>
  <Image
    alt='Mountains'
    src='/mountains.jpg'
    layout='fill'
    objectFit='contain'
  />
</div>

更多内容请点击objectFit 这里