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

6rqinv9w  于 2023-06-22  发布在  其他
关注(0)|答案(2)|浏览(125)

我试图改变我的标准<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}
  alt="something"
/>
</div>

这个很好用

使用NextJS Image时,它无法正常工作

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

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

我所能看到的是,<Image/>的外部div本身的宽度是整个div(文本+图像)的宽度,因为<Image/>的父div显然没有宽度或高度,而它有w-7/12。

ewm0tg9j

ewm0tg9j1#

position:relative放入父div

hi3rlvi2

hi3rlvi22#

您可以尝试使用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"
  alt="something"
/>
 </div>
</div>

相关问题