Next.js Discord

Discord Forum

Image priority not applying

Answered
Selkirk Rex posted this in #help-forum
Open in Discord
Selkirk RexOP
I'm using the next/image component and have set a priority so it preloads the image as it's above the fold content. However, it doesn't seem t be applying for some reason. Can anyone suggest why that may be? Here is my image component:
const itemTemplate = (item) => {
    const imagePath = getImagePath(agent, item.url);

    return (
        <Image
            loader={(props) => imgixLoader(agent, props)}
            src={imagePath}
            priority={true}
            fill={true}
            sizes="(min-width: 992px) calc(70% - 2rem),
                    100vw"
            alt="Property image"
        />
    );
};
Answered by Selkirk Rex
I think I've figured it out. It refers to an image lower down the page which is a repeat of the main image. Because it is below the fold it's not priority loaded and the warning is referring to this one.
View full answer

2 Replies

Selkirk RexOP
To provide a few more details the rendered image doesn't contain loading="lazy" but I also get a warning in the console that I should add priority to the image:

rn-once.js:11 Image with src "..._27.jpg" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.
R

Yet I do have priority={true} set on the image.
Selkirk RexOP
I think I've figured it out. It refers to an image lower down the page which is a repeat of the main image. Because it is below the fold it's not priority loaded and the warning is referring to this one.
Answer