我目前正在使用Next.js和next/image组件进行图像渲染。我一直在使用它来优化应用程序中的图像加载，但我对它如何在后台工作的技术细节很好奇。具体来说，我想知道它是否在优化过程中进行任何API调用。
以下是我目前的理解：
- next/image提供了延迟加载、响应式图像和格式选择等功能来优化图像加载。
- 它在构建过程中以不同的大小和格式生成多个版本的图像。
- 它根据浏览器的支持选择最合适的图像格式。
- 默认情况下，它支持延迟加载，您可以指定响应式图像尺寸。
然而，我无法找到有关next/image在此优化过程中是否进行任何API调用的信息。我的目标是更深入地了解其内部工作原理。任何关于此主题的见解或资源都将非常感谢。
1条答案
按热度按时间af7jpaap1#
当你有这样的代码时：
字符串
当组件被渲染时，默认加载器会将src url更改为
/_next/image?url=/test.jpg&w=384&q=75，其中包含优化所需的所有参数，如质量和宽度。在服务器端，NextJS将使用sharp优化和裁剪/调整图像大小。这些优化后的图像将被缓存，以便后续对同一图像的请求不需要再次优化。如果您在Vercel上托管，它将使用Vercel自己的图像优化服务。请注意，也可以为图像优化创建自定义加载器。这将允许您使用任何您想要的图像优化服务。自定义加载器只需为图像组件提供一个函数即可实现，该函数接受src，宽度，质量并返回加载优化图像的URL。通常，您可以像默认加载器一样将质量和宽度作为URL参数。
型