NextJS image资源[link of image]使用link preload进行了预加载,但在窗口的load事件发生后的几秒钟内未使用

3pmvbmvn  于 2023-03-08  发布在  其他
关注(0)|答案(1)|浏览(246)

我在NextJS中使用next/image作为我的博客网站,但是我注意到控制台中出现了以下警告:

The resource http://localhost:3000/_next/image... was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

图像在折叠上方,不应该被延迟加载。这就是为什么我在图像上使用priority的原因。如果我删除它,会弹出以下警告:

react_devtools_backend.js:4026 Image with src "/media/image1.jpg" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.
Read more: https://nextjs.org/docs/api-reference/next/image#priority

代码:

<div className={`image-container article-page__banner"`} >
            <Image
                className="article-page__banner"
                src={metadata.banner}
                alt={"Article banner"}
                width={1000}
                height={500}
                layout="responsive"
                objectFit="cover"
                priority
            />
        </div>

我看到这个警告只在Chrome中出现,而且只有在严格模式为真的情况下才会出现。这个警告有什么具体的原因吗?我可能可以忽略它,但我想知道它背后的原因是什么。
(Tech堆栈:NextJS和网站是SSG + TypeScript)

tag5nh1u

tag5nh1u1#

你需要将优先级设置为真,
默认值为false
所以试试这个

<div className={`image-container article-page__banner"`} >
        <Image
            className="article-page__banner"
            src={metadata.banner}
            alt={"Article banner"}
            width={1000}
            height={500}
            layout="responsive"
            objectFit="cover"
            priority={true}
        />
    </div>

相关问题