我目前正在使用Next.js和用于图像呈现的Next/Image组件.我一直在使用它来优化应用程序中的图像加载，但我对它在幕后如何工作的技术细节很感兴趣.具体地说，我想知道它在优化过程中是否进行了任何API调用.
到目前为止，我的理解是:
然而，我找不到关于Next/Image在这个优化过程中是否进行任何API调用的信息.我的目标是更深入地了解它的内部工作原理.任何关于这一主题的见解或资源都将不胜感激.
当您有如下代码时:
<Image width={180} height={37} src="/test.jpg" />
呈现组件时，默认加载器会将src url更改为/_next/image?url=/test.jpg&w=384&q=75，进而包含优化所需的所有参数，如质量和宽度.在服务器端，NextJS将使用sharp对图像进行优化和裁剪/调整大小.然后缓存这些优化的映像，以便对同一映像的后续请求不需要再次优化它.如果你在Vercel上托管，它将使用Vercel自己的图像优化服务.
请注意，也可以将图像优化设置为custom loader.这将允许您使用任何您想要的图像优化服务.定制加载器的实现只需给图像组件一个函数，该函数获取src、宽度、质量并返回加载优化图像的url.通常，您将质量和宽度作为url参数，就像默认加载程序所做的那样.
const imageLoader = ({ src, width, quality }) => {
return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}