Images won't load on next.js deployment

Support
1

The images will not load despite loading in the dev environment, the github repo is GitHub - J0seph0/lolm_production-site

I think that something might need included in the build config though I cannot figure out what or why.
https://roundglassmedia.netlify.app/

2

Hi @J0seph0 , welcome.
Kindly check the forum links below If you have not done so already since the problems stated there is similar to yours.

3

Yes I had looked at those forums before posting this one. I am not using cloudinary and the other one doesn’t answer much. I am trying to use a local image, and from the forums I have gathered I need to change the config file maybe or use sharp or something?

4

Thanks for the extra information @J0seph0
The repository you shared to your site is either deleted or private.
Kindly confirm if it is either deleted or private.

Once I am able to view your repository I can help with the debugging

Thanks.

5

What should I use shutterstock image?

6

I just made it public, it was private to begin with. Sorry about that, let me know if you find anything.

thank you

7

Hi @J0seph0 , the reason why your images are not loading is because of 2 reasons.

1. Serve static files without /public path

Next.js can serve static files, like images, under a folder called `public` in the root directory. Files inside `public` can then be referenced by your code starting from the base URL (`/`).

For example, if you add me.png inside public, the following code will access the image:

import Image from 'next/image'
 
export function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}

2. Disable netlify-plugin-cypress plugin

The netlify-plugin-cypress plugin is causing build errors therefore you have to remove it in your netlify.toml file under the [[plugins]] section.

Make the changes and then redeploy. You images will load as expected.
Let me know the outcome.

Thanks.