我一直在使用Next.js新的优化图像组件，我想我理解它在使用不同的布局选项（intrinsic、fixed、responsive和fill）时是如何工作的。但是，有一个名为imageSizes的配置选项我不明白。
从文档中，我可以看出有两个默认配置选项：
module.exports = {
images: {
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
},
}字符串
如果我没理解错的话，devicesSizes是一个排序断点数组;当对一个映像使用fill或responsive布局时，Nextjs会创建宽度与断点相对应的多个映像版本，并在为该映像自动生成的srcset中引用这些版本。我们也可以通过sizes属性告诉浏览器如何使用这些版本。举例来说：
<Image
image={ image }
layout="responsive"
sizes="(max-width: 500px) 100vw, 25vw"
width={1200}
height={960}
/>型
对于imageSizes，文档说明：
您可以使用imageSizes性质指定影像长度的清单。这些宽度应该与deviceSizes中定义的宽度不同（通常更小），因为数组将被连接。当next/image组件使用layout=“fixed”或layout=“intrinsic”时，将使用这些宽度。
这是否意味着，当使用fixed或intrinsic布局时，Nextjs会创建宽度与imageSizes中的值相对应的图像的多个版本？如果是这样的话，您如何告诉<Image />组件使用哪一个（因为文档还说size prop 只能与fill和responsive布局一起使用）？
换句话说，如果我有一个1200 px宽的图像，我想以imageSizes中指定的一个大小使用它，我该如何做？
1条答案
按热度按时间o75abkj41#
你无法选择。
算法会根据场景为您选择……
你必须意识到的第一件事是，一个组（deviceSizes）用于大图像和两个布局：填充和响应：另一个是小图像（imageSizes）和最后两个布局：固定的和固有的。
让我们运行一些测试，看看结果：
下一个配置：
字符串
组件配置：
型
这就是结果：
型
你看到了吗？根据图像在相应配置中的范围，你会得到不同的结果。
很难猜出会是哪种选择。900w的视口得到了1080w的图像（上面的视口大小选择）。700的图像比视口小。
**你没有精确地选择图像，但这并不意味着你没有很多控制权。
感谢
@bobarros在Github上回答了这个问题：https://github.com/vercel/next.js/discussions/24771