next.js - Next/Image 的组件太慢而无法显示

Question

我正在使用 Next.js 10.0.7 和 next-images 1.7，大图像需要几秒钟才能出现。

我正确使用了组件，您可以在下面看到，但我认为我的问题有解决方案。

<Image
   height="600"
   width="800"
   src={
     'https://myImageURL.png'
   }
   alt="my image"
/>

一些问题：

score 19 · Accepted Answer

我一直在遇到同样的问题，主要是在 Slider 组件中。基本上，由于图像在 Slider 将其移入视图之前处于屏幕外，因此存在延迟并且短时间内不会显示，这看起来很讨厌。

解决方案： 添加sharp包。问题来自 NextJS 使用的默认图像处理器。我不知道这是否对 OP 有好处，但就我而言，我还没有完全阅读文档。有一个提示说：

next/image 组件的默认加载器使用 'squoosh' 库来调整图像大小和优化。该库安装快捷，适用于开发服务器环境。对于生产环境，强烈建议您通过运行安装可选的sharp库

yarn add sharp

在您的项目目录中。如果已经安装了sharp但无法解析，您可以通过 NEXT_SHARP_PATH 环境变量手动将路径传递给它，例如 NEXT_SHARP_PATH=/tmp/node_modules/sharp

添加后sharp，我的图像处理速度更快，不再有明显的延迟。我会尝试在添加priority={true}到每个图像之前添加它，因为这会影响网站性能。

score 19 · Accepted Answer

问题是图像组件的默认行为是延迟加载。您可以通过添加这样的道具来将此行为更改为渴望：或添加.loadingloading="eager"priority={true}

推荐的方法是使用priority.

关于图像格式。Webp 比 png 小，因此加载速度更快。

2 回答 2