Next.js Cloudinary images not displaying with loader

user_16419991 0
Viewed 1461

I am trying to use next/image component with cloudinary.com and cloudinary loader. But my image doesn't display with loader, it only shows without loader.

WITHOUT LOADER

next.config.js file:

module.exports = {
    images: {   
        domains: ['res.cloudinary.com'],
    },
}

My image component:

<Image src="https://res.cloudinary.com/eminvarol/image/upload/v1625915405/index-backround_rubhkh.jpg" width={500} height={500}/>

and this is working in here

enter image description here

WITH LOADER

next.config.js file:

module.exports = {
    images: {   
        domains: ['res.cloudinary.com'],
        loader: 'cloudinary'
    },
}

My image component is same:

<Image src="https://res.cloudinary.com/eminvarol/image/upload/v1625915405/index-backround_rubhkh.jpg" width={500} height={500}/>

With loader, my page looks like this

enter image description here

How can I solve this problem?

cloudinary nextjs-image next.js
1 Answers

The syntax is slightly different when using a valid third-party loader. You need to define a loader and a path.

module.exports = {
    images: {
        loader: 'cloudinary',
        path: '<cloudinary-path-here>'
    }
}

Check out the Image Optimization docs for more details.

user_18707800
Related