examples/with-cloudinary not displaying images from cloudinary

[thedavidweng]

Summary

Hi everyone, I deployed the demo and replaced the environmental variables with my images hosted on cloudinary, but seems like the images weren't showing on the site, although when it's loading I can see blurred thumbnail seems to match the color of my image, but it disappears after loading. If I right-click on the position where the image should appear, I can open the correct image, it just doesn't display on the website.

Additional information

https://github.com/thedavidweng/image-gallery-starter

Example

https://image-gallery-starter-dun-ten.vercel.app/

[kinpoe-ray]

I ran into the same problem as you.Have you solved it since?
my example:
https://image-gallery-starter-kinpoe-rays-projects.vercel.app/

[LuisParedes1]

Hi everyone, I had this same issue. After debugging for some time, this worked for me.

Insidenext.config.js file,

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "res.cloudinary.com",
        port: "",
        pathname: "/<my-account>/**",
        search: "",
      },
    ],
  },
};

you need to edit line 8,

pathname: "/<my-account>/**",

to reference your cloudinary cloud name (the same value of NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME)

Hope this helps