Cloudflare example?

[Ic3m4n34]

Can someone provide a complete Cloudflare images example? No matter what I do, I can't get it to work.

nuxt.config.ts

image: {
    domains: ['imagedelivery.net'],
    cloudflare: {
      baseURL: 'https://imagedelivery.net/<my-id>/',
    },
  },

When I use it like this:

<nuxt-img
        provider="cloudflare"
        src="rib-eye-steak-medium-rare.webp"
        height="300"
        :modifiers="{ fit: 'contain' }"
/>

this is what URL is requested: https://imagedelivery.net/<my-id>/cdn-cgi/image/w=1536,f=webp/rib-eye-steak-medium-rare.webp.

First: Where are the parameters like (w=1536) are coming from? Am I missing something here?

[daver987]

logo.src = https://imagedelivery.net/9mQjsjdk83vgwm3kCilycqww/f5672281-3d76-480e-22fd-8ed64f42df00/1920 <NuxtPicture :alt="logo.alt" :src="logo.src" width="1920" :img-attrs="{ class: 'object-contain w-full max-w-xs filter grayscale dark:filter dark:grayscale-0 hover:grayscale-0', }" loading="lazy" />

Nuxt picture creates the srcset attributes, for the different sizes of screen and use the full url

Also remember there are multiple ways of handling images with Cloudflare, There's polish, image resizing, and Cloudflare images. Polish and resizing are paid products, and it looks like you might be trying to use the image resizing instead of Cloudflare Images(Which is also paid). If you use picture, there's no need to use image resizing it gets done for you by Nuxt Picture.

[NeroN7F]

Is there a way to use cloudflare provider with Cloudflare Images? Seems like it makes the image request to the

https://imagedelivery.net/<my-id>/cdn-cgi/image/w=1536,f=webp/ ,

which is the format of the Cloudflare Image Resizing, while the actual Cloudflare Images using url like below

https://imagedelivery.net/<my-id>/<img-id>/public

The custom provider solves the problem, however you are losing the features of the Nuxt-Picture srcset attributes, for the different screen sizes

[daver987]

I'm actually not using Cloudflare's Image Resizing feature, I'm using Cloudflare Images to store and serve my images. I then pass the URL for the image to the NuxtPicture component, which takes care of generating the different image sizes for responsive designs. So I don't need to use the built-in Cloudflare provider in Nuxt Image for this setup.