如何解决NextJS Image 给出了一个奇怪的定位
我正在尝试将我的标准 <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(文本 + 图像)的宽度,因为 <Image/>
的父 div 显然没有宽度或高度,虽然它有 w-7/12。
解决方法
您可以尝试使用 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。