Using Next/Images component with Cloudflare images

I am tryng to use next/image componente with Cloudflare images, but I am getting this error:
Error: Invalid src prop on next/image , hostname “imagedeliverynet” is not configured under images in your nextconfigjs
Plase check the images with the config I tried:

I made a lot of research and found many people with the same error, they can use external images from S3, but when they try to use Cloudflare images with next/Image componente get the same error than me. Please help me to solve this issue, anny help will be apprecciate.

I also try this congif and get same error:
help_1

Here my code with the image:

This topic was automatically closed after 14 days. New replies are no longer allowed.

Hi @asniel,

I’m sorry you had to wait for an answer for so long. I’m not sure if you’re still looking for a solution. Could you provide additional information on what version of Next.js you’re using?

Assuming you’re using the newest version of Next.js, you can configure imagedelivery.net as a remote host by adding the remote pattern to your next.config.js. Here is an example:

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'imagedelivery.net',
        port: '',
      },
    ],
  }
};

I’ve also created a sandbox for you to illustrate the solution. Let me know if that helps.

A note on your strategy here. Using imagedelivery as the remote host chains two caching and resizing services one after another. We (cloudflare) will resize the image to the dimensions you’ve specified in your variant definition and cache it at the edge. Next, Vercel will load the resized image and resize and cache it again according to your project configuration (or project defaults).

We recommend using a global loader: Integration with frameworks · Cloudflare Image Optimization docs

Again, sorry for the time it took me to get back to you on this.