下一页JS图像使用布局='fill'获取大图像

Question

所以，我使用cloudary来提供适当大小的图像，然而，nextJS图像似乎总是抓取w_3840，所以图像宽度为3840，而不是固定值。

<Image
src={loaderUrl(logoImage)}
alt=""
role="presentation"
objectFit={'contain'}
layout={'fill'}
loader={logoImageLoader}
priority
/>

以position: relative和固定高度和宽度的div形式包裹。

加载器如下

export const logoImageLoader: ImageLoader = ({
src,
width,
quality,
}: ImageLoaderProps): string => {
const params = [
'f_auto',
'c_pad',
'g_south_west',
'ar_270:148',
`w_${width}`,
`q_${quality || 'auto'}`,
].join(',');
return `${root}${params}${src}`;
};

然后当我重新加载页面并检查图像src，我得到查询像f_auto,c_pad,g_south_west,ar_270:148,w_3840,q_auto/…

所以，如果我理解正确的话，这个图像标签正在获取一个宽度为3840px的图像，对于大小为270px x 148px的容器。为什么?我如何获取图像与正确的大小?

css包装

.wrapper {
position: relative;
width: 223px;
height: 148px;
max-width: 100%;
@include breakpoints.media(tablet) {
width: 270px;
}
}

Answer 1

我也有这个问题，出于某种原因，有时想要

<Image
src={loaderUrl(logoImage)}
alt=""
role="presentation"
objectFit={'contain'}
layout={'fill'}
loader={logoImageLoader}
priority
sizes={'(max-width: 600px) 270px, 223px'}
/>

有趣的部分是"如果你不填充默认值它就不会压缩

Answer 2

我认为解决方案可能是添加尺寸属性设置为Image组件。来自Next.js文档:

size的值将极大地影响图像使用的性能布局="responsive"或布局="fill"(…)浏览器使用sizes的值来确定要从next/legacy/image的自动生成的源集中下载的图像的大小。(…)如果没有指定大小值，默认值为100vw(全屏宽度)。