Next JS and Cloudinary, images not loading

Question

I'm learning Next JS, and I'm trying to export my app to be a static site. As a result, I'm using Cloudinary to process the images, the problem is that they are not showing. Next JS seems to add some parameters to the URL, which break the images, here's an example:

https://res.cloudinary.com/dnliyglel/image/upload/v1624031405/next-tutorial/f_auto,c_limit,w_384,q_auto/images/profile_ileph2.jpg (doesn't work)

https://res.cloudinary.com/dnliyglel/image/upload/v1624031405/next-tutorial//images/profile_ileph2.jpg (does work)

Seems like the extra f_auto,c_limit,w_384,q_auto in the path break it.

Is this because I have a free Cloudinary account? How do I fix this?

For reference, here's my next.config.js:

module.exports = {
  basePath: '/out',
  assetPrefix: '/out',
  images: {
    loader: 'cloudinary',
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    path: 'https://res.cloudinary.com/dnliyglel/image/upload/v1624031405/next-tutorial/',
  },
    exportPathMap: async function() {
    const paths = {
      '/': { page: '/' },
      '/posts/first-post': { page: '/posts/first-post'}
      };
      return paths; 
    }
  };

And here's an example of how it's added to a component:

<Image
  priority
  src="/images/profile_ileph2.jpg"
  className={utilStyles.borderCircle}
  height={144}
  width={144}
  alt={name}
/>

Aleksandar Aleksandar · Accepted Answer · 2021-06-18T17:55:03

The URL to the asset when transformations are included is not correct.

https://res.cloudinary.com/dnliyglel/image/upload/v1624031405/next-tutorial/f_auto,c_limit,w_384,q_auto/images/profile_ileph2.jpg

The version number (v1624031405) and a folder part of the public_id (next-tutorial) are before the transformations while the rest of the public_id (images/profile_ileph2) is after.

Moving them in the right place means the image loads as expected: https://res.cloudinary.com/dnliyglel/image/upload/f_auto,c_limit,w_384,q_auto/v1624031405/next-tutorial/images/profile_ileph2.jpg

You could try changing the path from:

https://res.cloudinary.com/dnliyglel/image/upload/v1624031405/next-tutorial

To:

https://res.cloudinary.com/dnliyglel/image/upload/

Then include the full public_id (including next-tutorial folder) in your <Image/> component's src. E.g.

src="/next-tutorial/images/profile_ileph2.jpg"

More details about the structure of Cloudinary URLs can be found in the below section of the documentation: https://cloudinary.com/documentation/image_transformations#transformation_url_syntax

Next JS and Cloudinary, images not loading

1 Answers