如何防止NextJS Image自行拉伸

问题描述 投票:0回答:1

我对 NextJS Image 组件有一个大问题。当我给它一个图像作为源时,它不遵循正常尺寸,而是奇怪地设置了一些巨大的宽度和尺寸。我不想通过 props 手动设置这些,也不想使用 fill prop,我只想让我的图像像在 React 中那样工作,有什么方法可以实现这一点吗?

next.js
1个回答
0
投票

不。您必须在下一个 js 中提供图像标签的高度和宽度。如果您使用本地图像,则可以没有高度和宽度,但远程服务的图像需要它。这是他们官方文档中的一句话

宽度和高度属性用于推断正确的方面 图像的比例并避免从图像加载中发生布局偏移。 宽度和高度并不决定图像文件的渲染大小。

在 React 中,您很可能会使用它来使图像响应。使用 React 时,这些图像会为所有客户端(移动、桌面)加载相同大小的图像。

img {
  width: 100%;
  height: auto;
}

但是,nextjs 在内部根据不同设备的类型优化了图像。不过,您可以使用响应式属性来使您的图像在 nextjs 中更好。

Next Js 中的响应式图像

NextJs 中的图像优化

© www.soinside.com 2019 - 2024. All rights reserved.