nextjs Image

[fresh dove]

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'res.cloudinary.com',
port: '',
pathname: '/account123/**',
search: '',
},
],
},
};

export default nextConfig;

is this correct of using nextjs Image cloudinary?

<TableCell><Image src="https://res.cloudinary.com/digi2hcyz/image/upload/v1751251601/productImage/n20mm1mqjd7ljqlvl3fv.png" width={50} height={50} alt="Product Image" /></TableCell>

[rare nexus]

Hi @fresh dove. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Your usage of the Next.js Image component with Cloudinary is almost correct, but there is a mismatch between your remotePatterns configuration and the actual image URL you are using.

1. remotePatterns Configuration

You have:

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'res.cloudinary.com',
        port: '',
        pathname: '/account123/**',
        search: '',
      },
    ],
  },
};

But your image URL is:

<https://res.cloudinary.com/digi2hcyz/image/upload/v1751251601/productImage/n20mm1mqjd7ljqlvl3fv.png>

Notice that the pathname in your config is /account123/**, but your actual image path starts with /digi2hcyz/. For the image to be allowed, the pathname pattern must match the start of the path after the hostname. So, you should update your config to:

const nextConfig: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'res.cloudinary.com',
        port: '',
        pathname: '/digi2hcyz/**',
        search: '',
      },
    ],
  },
};

This will allow images from your Cloudinary account with the correct path pattern. The rest of your usage is correct, including the <Image /> component usage in your table cell.

2. Reference

This configuration approach is confirmed in the Next.js documentation, which states that the pathname should match the path structure of your remote images, and you should be as specific as possible to prevent malicious usage. The search property can be left as an empty string if you do not want to restrict query strings. If you want to allow all paths under your Cloudinary account, use the correct account name in the pathname pattern Next.js Image Remote Patterns.

---

Summary:
Update your pathname in remotePatterns to match your actual Cloudinary account path (/digi2hcyz/**), and your setup will work as intended.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: