Nextjs 优化的 Image 组件的“imageSizes”配置选项实际上有什么作用？-解网

问：

我一直在使用Next.js新的优化图像组件，我想我了解它在使用不同的布局选项（、、和）时是如何工作的。但是，有一个我不明白的配置选项。intrinsicfixedresponsivefillimageSizes

从文档中，我可以看出有两个默认配置选项：

module.exports = {
  images: {
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
}

如果我理解正确的话，是各种断点数组;当对图像使用 or 布局时，Nextjs 会创建图像的多个版本，其宽度与断点相对应，并在它为该图像自动生成的中引用这些版本。我们也可以通过道具告诉浏览器如何使用这些版本。例如：devicesSizesfillresponsivesrcsetsizes

<Image 
    image={ image }
    layout="responsive" 
    sizes="(max-width: 500px) 100vw, 25vw" 
    width={1200}
    height={960}
/>

对于，文档说：imageSizes

可以使用 imageSizes 属性指定图像宽度列表。这些宽度应与宽度不同（通常更小）在 deviceSizes 中定义，因为数组将被连接。这些当 next/image 组件使用 layout=“fixed” 或 layout=“内在的”。

这是否意味着，当使用或布局时，Nextjs 会创建多个版本的图像，其宽度对应于？如果是这样，你怎么能告诉组件使用哪一个（因为文档还说道具应该只与和布局一起使用）？fixedintrinsicimageSizes<Image />sizefillresponsive

换句话说，如果我有一个 1200px 宽的图像，并且我想以中指定的尺寸之一使用它，我该怎么做？imageSizes

next.js

你没有选择。

算法会根据场景为您选择...

您必须意识到的第一件事是，一个组（deviceSizes）用于大图像和两种布局：填充和响应：另一个用于小图像（imageSizes）和最后两种布局：固定布局和内部布局。

让我们运行一些测试，看看结果：

下一个配置：

images: {
    deviceSizes: [640, 750, 828, 1080, 1200],
    imageSizes:  [32,  64,  96,  128,   256],
}

组件配置：

const ImageUse = () => {
  return (
    <>
      <div style={{ position: 'relative', display: 'block', width: '1100px', height: "766px" }}>
        <Image layout="fill" src="/assets/image_1.jpg" />
      </div>
      <div style={{ position: 'relative', display: 'block', width: '100%', height: "auto" }}>
        <Image
          layout="responsive"
          src="/assets/image_2.jpg"
          width="700"
          height="560"
        />
      </div>
      <div style={{ position: 'relative', display: 'block', width: '200px', height: "160px" }}>
        <Image
          layout="fixed"
          src="/assets/image_3.jpg"
          width="180"
          height="64"
        />
      </div>
      <div style={{ position: 'relative', display: 'block', width: '100px', height: "72px" }}>
        <Image
          layout="intrinsic"
          src="/assets/image_4.jpg"
          width="96"
          height="60"
        />
      </div>
    </>
  );
};

结果如下：

originImage: 1475w x 1180h (jpg)

viewport:    1100w
1 and 2: 1200w x 960h 
3 and 4: 250w x 205h

viewport:    900w
1 and 2: 1080w x 864h 
3: 256w x 205h
4: 96w x 77h

viewport:    700w
1 and 2: 640w x 512h 
3: 256w x 205h
4: 96w x 77h

你明白了吗？根据图像落在相应配置中的范围，您将获得不同的结果。

要猜出会是哪个选择并不容易。900w 视口获得和 1080w 图像（视口大小以上的选择）。700 的图像比视口小。

你不能精确地选择图像，但这并不意味着你没有太多的控制权。

感谢 Github 上的答案：https://github.com/vercel/next.js/discussions/24771@bobarros

上一个：MathML 的仅限 HTML 的回退

下一个：未定义 jQuery（使用 Webpack）

Nextjs 优化的 Image 组件的“imageSizes”配置选项实际上有什么作用？

What does the "imageSizes" configuration option for Nextjs optimized Image component actually do?

评论

你没有选择。

算法会根据场景为您选择...