我试图让页面呈现时，只有头部图像完成加载，以避免空白的图像加载时。我正在使用Next.JS图像组件import Image from 'next/image'因此，我将属性“优先级”包括在内，如下所示：
import Image from 'next/image'
<Image ... priority={true} />
字符串然而，它似乎没有任何效果。当我加载页面时，空白空间仍然存在一段时间，直到图像加载完成。这会破坏加载页面时执行的动画。
sbdsn5lh1#
好吧，这可能是因为图像本身是一个大而详细的图像，即使预加载它需要一些时间来实际加载。一个可能的解决方法是在加载实际图像之前使用图像的placeholder属性渲染模糊图像。
placeholder
<Image placeholder="blur" blurDataURL="/your-URL.image" />
字符串参考：https://nextjs.org/docs/app/api-reference/components/image#priority
1条答案
按热度按时间sbdsn5lh1#
好吧，这可能是因为图像本身是一个大而详细的图像，即使预加载它需要一些时间来实际加载。
一个可能的解决方法是在加载实际图像之前使用图像的
placeholder属性渲染模糊图像。字符串
参考：https://nextjs.org/docs/app/api-reference/components/image#priority