12

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

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

4

3 回答 3

14

以next/image这种方式设置组件的边距目前不起作用。有关更多详细信息，请参阅相关的GitHub 讨论。

next/image在组件内部，img元素和包装它的元素具有覆盖通过的某些值的内联样式className。

作为一种解决方法，您可以添加一个包装器元素并将margin样式应用到它。

<div className="mt-3">
    <Image
        data-testid="close-icon"
        src="/CloseIcon.svg"
        alt="Close Nav Bar"
        height="24"
        width="24"
    />
</div>
于 2021-01-02T10:45:15.877 回答
3

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">
于 2021-07-10T03:33:59.287 回答
2

尝试这个：

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

更多关于objectFit 这里

于 2021-08-15T14:19:26.320 回答