NextJS Image 给出了一个奇怪的定位

Posted 2023-03-06

【中文标题】NextJS Image 给出了一个奇怪的定位

【英文标题】：NextJS Image gives a weird positioning

【发布时间】：2021-07-13 01:49:30

【问题描述】：

我正在尝试将我的标准 <img/> 更改为 NextJS <Image/>，但我找不到我的图像无法正确呈现的原因。

这是基础标签

<div className=" mx-auto sm:w-9/12 lg:w-7/12 xl:w-8/12">
  <img
  className="object-fill rounded-md mx-auto sm:w-9/12 lg:w-full xl:w-8/12"
  src=img
  
/>
</div>

效果很好

在使用 NextJS 图像时，它不能正常工作

<div className=" mx-auto sm:w-9/12 lg:w-7/12 xl:w-8/12">

 <Image
  src=img
  layout="fill"
  objectFit="contain"
  
  className="rounded-md mx-auto w-full"
></Image>
</div>

我可以看到<Image/> 的外部 div 本身占用了整个 div 的宽度（文本 + 图像），因为 <Image/> 的父 div 显然没有宽度或高度，而它有 w -7 月 12 日。

【参考方案1】：

您可以尝试使用 div 作为容器来设置 Image 组件的样式。

<div className=" mx-auto sm:w-9/12 lg:w-7/12 xl:w-8/12">
<div  className="rounded-md mx-auto w-full">
 <Image
  src=img
  layout="fill"
  objectFit="contain"
  
/>
 </div>
</div>

【讨论】：

嗨，遗憾的是这没有帮助， div 仍然采用文本 + 图像的宽度而不是图像宽度