Next Images not working in production

Support
1

Hi there,

I have deployed my nextjs site to netlify. The site URL is Netlify App

Everything is working as expected however my images are not loading. Initially I used to images from public folder and had same issue. I am now using Cloudinary hoping that the issue will be resolved. However I am getting the same issue. The rendered next image looks like following

<img alt="monebag logo" src="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fadikari%2Fimage%2Fupload%2Fq_auto%2Cf_auto%2Fmonebag%2Flogo-small_uncinj&amp;w=64&amp;q=75" decoding="async" data-nimg="true" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" srcset="/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fadikari%2Fimage%2Fupload%2Fq_auto%2Cf_auto%2Fmonebag%2Flogo-small_uncinj&amp;w=32&amp;q=75 1x, /_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fadikari%2Fimage%2Fupload%2Fq_auto%2Cf_auto%2Fmonebag%2Flogo-small_uncinj&amp;w=64&amp;q=75 2x">

The image URL I am looking to use is https://res.cloudinary.com/adikari/image/upload/q_auto,f_auto/monebag/logo-small_uncinj which is working as expected.

Everything is working as expected in development. I am using nextjs netlify plugin to deploy the site.

Thank you.

2

Welcome to the forums @adikari

There is a discussion on GitHub on this topic Next/image with Cloudinary which links to Loader of which there is a Cloudinary option. Have you tried this?

I (personally) find it strange to use an image optimisation tool such as Next/Image on top of an image optimisation service such as Cloudinary, though I admit I do not use Next/Image so do not understand how it works with the such services.

1 Like
3

I have gone through pretty much any resources I can find already. This seems to be some error on netlify end. Here is the logs from next_image function on Netlify.

9:44:49 AM: 2021-09-13T23:44:49.237Z	undefined	ERROR	
Something went wrong installing the "sharp" module

Cannot find module '../build/Release/sharp-linux-x64.node'
Require stack:
- /var/task/node_modules/sharp/lib/sharp.js
- /var/task/node_modules/sharp/lib/constructor.js
- /var/task/node_modules/sharp/lib/index.js
- /var/task/.netlify/functions-internal/next_image/next_image.js
- /var/task/next_image.js
- /var/runtime/UserFunction.js
- /var/runtime/index.js

Possible solutions:
- Install with the --verbose flag and look for errors: "npm install --ignore-scripts=false --verbose sharp"
- Install for the current runtime: "npm install --platform=linux --arch=x64 sharp"
- Consult the installation documentation: https://sharp.pixelplumbing.com/install
9:44:49 AM: 2021-09-13T23:44:49.532Z	undefined	ERROR	
Something went wrong installing the "sharp" module

Cannot find module '../build/Release/sharp-linux-x64.node'
Require stack:
- /var/task/node_modules/sharp/lib/sharp.js
- /var/task/node_modules/sharp/lib/constructor.js
- /var/task/node_modules/sharp/lib/index.js
- /var/task/.netlify/functions-internal/next_image/next_image.js
- /var/task/next_image.js
- /var/runtime/UserFunction.js
- /var/runtime/index.js

Possible solutions:
- Install with the --verbose flag and look for errors: "npm install --ignore-scripts=false --verbose sharp"
- Install for the current runtime: "npm install --platform=linux --arch=x64 sharp"
- Consult the installation documentation: https://sharp.pixelplumbing.com/install
9:44:49 AM: 288377d1 Duration: 237.52 ms	Memory Usage: 17 MB	9:44:49 AM: RequestId: 288377d1-c55f-4181-8073-0ba3bafb592e Error: Runtime exited with error: exit status 1
Runtime.ExitError
4

Part of the *netlify-plugin-nextjs` documentation has a section regarding image handling which says

If you want to use remote images in next/image, you will need to add the image domains to an allow list. Add the required domains to the images.domains array in next.config.js.

Unfortunately I can offer no insights on this error. A Support Engineer or other community member may have more information.

1 Like
5

@coelmay Thanks for the response. I have already done that and is setup as expected. Which is why it works on development. It does not work when deployed to Netlify. Based on the logs above, there seems to be some issues in the Netlify function deployed by the Essentinal Next.js Build Plugin. GitHub - netlify/next-runtime: The Next.js Runtime allows Next.js to run on Netlify with zero configuration

6

Resolved this issue. Posting my resolution in case someone else runs into the similar situation.

Apparently, in order to use the cloudinary loader, the loader option must be specified alongside the domains. Otherwise, it will just use the default loader. The updated nextjs config looks as following:

images: {
   loader: 'cloudinary',
   domains: ['res.cloudinary.com'],
  path: 'https://res.cloudinary.com/<cloudinary-id>/image/upload'
}

Then when using the image, relative paths must be used:

<Image alt="some image" width="30" height="30" src="/relative/path/to/image/on/cloudinary" />

If you want to use default loader and not use the cloudinary loader then sharp needs to be installed. The default loader seems to use sharp in production. By default its already installed in Vercel. However, its not available in Netlify it needs to be installed as external node modules by specifying in netlify.toml
File-based configuration | Netlify Docs i.e.

[functions]
  node_bundler = "esbuild"
  external_node_modules = [ "@ampproject/toolbox-optimizer", "sharp"]
2 Likes
7

Hey there, @adikari :wave:

Thanks so much for coming back and sharing your solution with us. Like you said, this will absolutely be beneficial for folks who encounter something similar. :netliconfetti: