我试图改变我的标准<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。
2条答案
按热度按时间ewm0tg9j1#
将
position:relative
放入父divhi3rlvi22#
您可以尝试使用div作为容器来设置Image组件的样式。