Next/image sporadically fails to load local images

Support
1

I’m getting some weird behavior using next/image component with Netlify. ~2-3% of the time, an image will simply fail to load with a 500 error. I refresh the page, and it successfully loads.

-The site uses NextJS.
-The images are stored in the public/images folder (some images are in a subdirectory of public/images)
-I believe this behavior is limited to images using the next/image component, but it may be occurring with standard 's as well; I just haven’t caught one yet.

Any idea what could be going on here?

2

Hey there, @rowens794 :wave:

Welcome to the Netlify Forums, and thanks for reaching out with those details! Can you please share a link to your deployed site, your most recent deploy log, and your build settings? Additionally, if you are able to share a copy of your repo that would be beneficial too. Those additional resources will help us look into this further.

3

Hi Hillary,

Here is a link to the deployed site: Link
Here is a link to the build log: Link

and the build settings are :
Base directory
Not set

Build command
npm run build

Publish directory
.next

Deploy log visibility
Logs are public

Builds
Active

4

Also, I apologize, but I don’t have permission from the client to share the repo. But I’m happy to provide any code snippets that would be helpful. For instance, one of the most recent image load failures I noticed was the logo in the top navbar. It is set via:

            <div className="flex flex-shrink-0 items-center ">
              <a href="/" className="flex items-center">
                <Image
                  className="h-8 w-auto "
                  src="/images/logo-dk.png"
                  alt="Alqymi"
                  height={32}
                  width={160}
                  priority={true}
                />
              </a>
            </div>

Where the < Image /> component is a ‘next/image’ component.

5

Hey there, @rowens794 :wave:

Thanks for the quick follow up. As I mentioned above, can you please share a link to your deployed site, your most recent deploy log, and your build settings? We can still look into those without the repo.

6

Hey Hillary, I left a comment below. I don’t have permission to share the repo but I shared a code snippet of an example of how I’m accessing the images I’m having trouble with.

8

Sorry, I sent my last message from my phone and didn’t realize that I have a post that is under review. I included links in it to build logs, etc. which I think triggered span review.

10

Hey there, @rowens794

First of all, my apologies! I completely missed that you had shared your deploy log above. Looking at the log, I see this line:

2:51:00 PM: Using Netlify Edge Functions for image format detection. Set env var "NEXT_DISABLE_EDGE_IMAGES=true" to disable.

Can you please try disabling edge functions for images, as the line states above, and see if this addresses your issue?

11

I will give that a try and let you know. Thanks, Hillary!

1 Like