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?

[drobertson-dev]

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

[drobertson-dev]

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.

[ymansurozer]

I've been trying to solve this for hours now but finally got it working!

So the baseUrl is simply your website's root url. Here is a working config for me:

  image: {
    format: ["avif", "webp"],
    provider: "cloudflare",
    cloudflare: {
      baseURL: "https://...",
    },
  },

However, the trick seems to be to enable what Cloudflare calls Transformations for the domain you'll be deploying your app, here s how mine looks (the on at the bottom is the one working with the config):

If you're using images from a third party domain, remember to enable Resize from any origin.

Finally, I am not entirely sure if this had an effect but I went to Plans under Images and purchased the 0$ plan (it seems this is for migrating to the new pricing system for CF images):

Edit: Just sent a PR to update the docs: #1601

[Baroshem]

Closing at the answer was given.

Feel free to reopen when needed :)

[danielhont]

Adding to this, as I still struggled a bit even though the solution above is correct:

If you're using Cloudflare for your site and you want to use NuxtImg with Cloudflare as provider for transformations, the site's SSL/TLS mode has to be set to "Full (strict)" (instead of the default wich is "Flexible", https://dash.cloudflare.com/?to=/:account/:zone/ssl-tls).

[alifnuryana]

Adding to this, as I still struggled a bit even though the solution above is correct:

If you're using Cloudflare for your site and you want to use NuxtImg with Cloudflare as provider for transformations, the site's SSL/TLS mode has to be set to "Full (strict)" (instead of the default wich is "Flexible", https://dash.cloudflare.com/?to=/:account/:zone/ssl-tls).

thanks this worked after hours

[raggesilver]

@ymansurozer in your example, where are the images stored? I have uploaded a few files to Cloudflare and tried a few different combinations of id vs filename but nothing works.

  image: {
    format: ["webp"],
    provider: "cloudflare",
    cloudflare: {
      baseURL: "https://side-branch.my-project.pages.dev/",
    },
  },

<NuxtImg
  src="/blog_03.webp"
  quality="100"
  loading="lazy"
/>

Which when deployed becomes: https://side-branch.my-project.pages.dev/cdn-cgi/image/q=100/blog_03.webp. This looks right, but I still get a 404.

Yes I purchased the plan to store + transform images and enabled it for my zone (subdomain and all).

Really wish there were proper docs on how to do this from beginning to end.

[ymansurozer]

I don't think you should upload directly to Cloudflare but instead put the blog_03.webp file directly inside your public folder. It should then pick it up. Other than that, the config looks exactly as how I use it.

[neok]

Cloudflare provider is not working in nuxt(with imagedelivery.net url).

if you want to use imagedelivery.net url you have to create custom provider
here is example working for me
providers/cloudflareImages.ts

import { joinURL } from 'ufo'
import { createOperationsGenerator } from '#image'
import type { ProviderGetImage } from '@nuxt/image'

const operationsGenerator = createOperationsGenerator()

/**
 *
 * Example URL:
 *   https://imagedelivery.net/{hash}/<image_id>/<variant>
 */
export const getImage: ProviderGetImage = (src, { modifiers = {}, options = {} } = {}) => {
    const runtimeConfig = useRuntimeConfig().public
    const accountHash =
        options.accountHash || runtimeConfig.cloudflareAccountHash

    if (!accountHash) {
        throw new Error('[nuxt-image] Missing Cloudflare accountHash')
    }

    const imageId = src.replace(/^\/+/, '')

    const variant = modifiers.variant || 'public'

    const url = joinURL(`https://imagedelivery.net/${accountHash}`, imageId, variant)

    const operations = operationsGenerator(modifiers)

    return {
        url,
        isStatic: true
    }
}

And you can use it like this:

    runtimeConfig: {
        public: {
            cloudflareAccountHash: '{hash}'
        }
    },
    image: {
        providers: {
            cloudflareImages: {
                name: 'cloudflareImages',
                provider: '~/providers/cloudflareImages.ts',
            },
        },
        provider: 'cloudflareImages',
    },

[MickL]

Does Cloudflare images work on localhost or with non-production deployments?

For example if I have a file at /public/my-image.jpg the provider would generate the following url: https://www.example.com/cdn-cgi/image/w=100,q=90/my-image.jpg

But here /my-image.jpg refers to what? The preview deployment at branch.example-website.pages.dev? Or at the production url www.example.com?