Next/Image 的组件太慢而无法显示 [英] Next/Image's components are too slow to appear

问题描述

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

I'm using Next.js 10.0.7 and next-images 1.7 and big images take some seconds to appear.

我使用正确的组件，你可以看到下面，但我认为我的问题有一个解决方案.

I'm using the components correctly, you can see bellow, but I think that there is a solution to my problem.

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

一些问题:

• 如果我将所有图像转换为 .webp 图像会显示得更快吗?
• 这个问题有解决办法吗?

推荐答案

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

I've been having trouble with the same issue, mostly in Slider components. Basically, because the image is off-screen until the Slider moves it into view, there is a delay and it doesn't show for a short time, which looks nasty.

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

Solution: Add the sharp package. The problem comes from the default image processor that NextJS uses. I don't know if this is good for OP, but in my case, I hadn't fully read the docs. There is a tip that states:

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

The next/image component's default loader uses the 'squoosh' library for image resizing and optimization. This library is quick to install and suitable for a dev server environment. For a production environment, it is strongly recommended that you install the optional sharp library by running

纱线加尖

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

in your project directory. If sharp is already installed but can't be resolved you can manually pass the path to it via the NEXT_SHARP_PATH environment variable e.g. NEXT_SHARP_PATH=/tmp/node_modules/sharp

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

After adding sharp, my images were processed much faster and there is no noticeable delay anymore. I would try adding this before adding priority={true} to every image, as that will impact the site performance.

这篇关于Next/Image 的组件太慢而无法显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！