在Next.js 12.2之前的版本
在旧的Next.js版本中，next/image组件的边距样式不起作用。更多细节请参见相关的GitHub discussion。
在next/image组件的内部，<img>元素和 Package 它的元素具有内联样式，这些样式覆盖了通过className传递的某些值。
作为一种解决方法，您可以添加一个 Package 元素，并对其应用margin样式。

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

从Next.js 12.2下载
您可以使用next/future/image组件来代替。这个新组件呈现一个<img>元素，默认情况下没有任何其他 Package 器，并且不再受 Package 器样式覆盖的约束。
您可以在next.config.js中启用next/future/image。

module.exports = {
    experimental: {
        images: {
            allowFutureImage: true
        }
    }
}

来自下一个. js 13

next/future/image组件已转换为next/image。与next/future/image一样，此组件呈现单个<img>元素，并且可以直接使用className/styles设置样式。

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>

有关objectFitHere的更多信息

将图像组件 Package 在div中有助于解决这个问题。我可以将类名应用于div，一切都正常工作。