I'm currently delving into the world of Next JS and attempting to convert my app into a static site. In doing so, I've opted to utilize Cloudinary for image processing; however, I'm encountering issues with the images not displaying. Next JS appears to be adding certain parameters to the URL that are causing the images to break. Here's an example:
(not functioning)
(works correctly)
It seems like the additional f_auto,c_limit,w_384,q_auto elements in the URL path are causing the issue.
Could this problem be related to having a free Cloudinary account? And how can I go about resolving it?
Here is a snippet from 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;
}
};
Additionally, here's an example demonstrating how it's incorporated into a component:
<Image
priority
src="/images/profile_ileph2.jpg"
className={utilStyles.borderCircle}
height={144}
width={144}
alt={name}
/>