下一个图像不采用类属性

问题描述

我正在使用 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 组件的样式目前不起作用（请参阅 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>

,

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