我正在尝试将我的标准更改<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 图像时,它无法正常工作
<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 的宽度(文本 + 图像),因为它的父 div<Image/>
显然没有宽度或高度,而它有 w-7/12。