Next/Image 的组件显示速度太慢

问题描述

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

我正确地使用了这些组件，你可以看到下面的内容，但我认为我的问题有一个解决方案。

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

一些问题：

• 如果我将所有图像转换为 .webp 图像显示速度会更快吗？
• 这个问题有解决方案吗？

解决方法

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

recommended way 正在使用 priority。