2

error

When I used the component of "next/image", I found that if the src was from cloudinary, it would not display correctly. I tried replacing with the component of "next-cloudinary", and it does display, but only if the src is from cloudinary, which obviously doesn't work in all cases. How to fix it?

next.config.js

  images: {
    domains: [
      'res.cloudinary.com',
      'avatars.githubusercontent.com',
      'lh3.googleusercontent.com'
    ]
  }
hongk_bb
  • 21
  • 1
  • hi @hongk_bb, what is "would not display correctly"? Is the image distorted with the wrong aspect ratio? Can you share the front-end code? And do you have the original image's URL? – atcloud Jun 11 '23 at 23:52
  • Just a note, uploading the original file without any dimension resizing is always recommended. Once the asset is already in your Media Library account, you could use our on-the-fly transformation for the different dimensions you need (see [documentation here](https://cloudinary.com/documentation/transformation_reference#overview)). For additional information, you [may checkout this site as well](https://spacejelly.dev/posts/how-to-programmatically-upload-images-to-cloudinary-in-react-next-js/). – epasos_573 Jun 12 '23 at 02:06

1 Answers1

0

I would need more code to understand what the problem may be stemming from. Your configuration file seems to be fine, therefore I can’t provide a clear solution for this. So after checking out the Cloudinary and Next JS documentation, here are a few things I want you to try out:

  1. Ensure that you have the next-image package installed in you Next JS project. If not, install it using your package manager.
  2. Try rebuilding your application with the npm run build before running it again. This may solve your problem.
  3. Next, try re-initializing the next.config.js file with the following code:

next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = nextConfig

const withImages = require('next-images');

module.exports = withImages({
  images: {
    domains: [
      'res.cloudinary.com',
      'avatars.githubusercontent.com',
      'lh3.googleusercontent.com',
    ],
  },
});
  1. If this still doesn’t work try creating a new test project. Re-initialize the next.config.js file with the above code and try create a new page in your project as:

Page.tsx:

import Image from 'next/image';

export default function Page() {
  return (
    <div>
      <h1>Next.js Image Test</h1>
     
      <Image
        src="https://res.cloudinary.com/demo/image/upload/v1/samples/sample"
        alt="Cloudinary Image"
      />
    </div>
  );
}

Finally, build the project and navigate to http://localhost:3000/Page. Hopefully, you should no longer experience issues with the image display from Cloudinary.

Ismail Vohra
  • 79
  • 7