support Cloudflare images

[danielroe]

https://www.cloudflare.com/en-gb/products/cloudflare-images/

[pi0]

Check out https://github.com/nuxt/image/pull/359 for context, and product docs. It is a hosted (by upload) API while there is another (experimental?) cdn-cgi/ endpoint that allows fetching remote images to work zero-config similar to netlify and vercel.

/cc @xtuc Do you have any updates?

[xtuc]

There's a (subtle) difference between Cloudflare Images and Image resizing (cdn-cgi/image/.. which isn't experimental);

• Cloudflare images is hosting the image and will generate a imagedelivery.net/ link at upload to serve an optimized image. The link needs to be injected in the HTML by nuxt.
• Image resizing is optimising and resizing the image on the fly, nuxt needs to include the image in the bundle in order to serve it and rewrite the URL to the /cdn-cgi/image/... path.

[pi0]

Thanks for clarifying @xtuc ❤️ Indeed second one is what we ideally want and is already possible for other providers. If it is out of beta now, do you have a link to docs?

[xtuc]

It's out of beta since September! The documentation is https://developers.cloudflare.com/images, I believe you'll need to pay but if you can send me your account details at sven @ cloudflare com, i'll ask to enable.

[chk613]

the beta only gives instrucitons for next, how can we adapt to Nuxt? https://developers.cloudflare.com/images/image-resizing/integration-with-frameworks

[lauragift21]

Circling back on this! I'm happy to look into this internally and see where I can help get this to work. cc @pi0 @danielroe

[danielroe]

Amazing - thank you @lauragift21!

[theolavaux]

I started using NuxtImage with Cloudinary but regarding the number of users we have it's ridiculously pricy, we would like to switch to Cloudflare Images in the near future, any ETA on this?

[realandrew]

Is there an ETA on this?

[MickL]

I am also very much interested in this. It shouldnt be too hard to integrated or am I missing something?

• [x] For the config it needs the account hash and optional baseURL
• [x] If baseURL is not set, it should generate image srcs starting with https://imagedelivery.net/, see docs
• [x] If baseURL is set, it should generate image srcs starting with ${baseURL}/cdn-cgi/imagedelivery/, see docs
• [x] <NuxtImg> needs to accept image id and variant
• [ ] <NuxtImg> needs to accept differnet variants depending on current screen size
• [x] Additionally if "flexible variants" is activated in the Cloudflare Dashboard, <NuxtImg> should accept the same transformation parameters as the current cloudflare provider does, see docs
• [ ] Optionally the current provider might be renamed to cloudflare-transformations and the new one could be named cloudflare-images

[MickL]

So I wrote a custom provider which fulfills all the points above BUT I dont know how to get the variants in. It seems like we need to have <NuxtImg> support setting variants per screen size, e.g.:

<NuxtImg variants="public xl:large">

I tried by using sizes prop but it refuses to render the image then:

<NuxtImg sizes="public xl:large">

Here is the custom provider, it works with flexible variants so far:

nuxt-config:

image: {
    provider: 'cloudflare-images',
    providers: {
      cloudflareImages: {
        name: 'cloudflare-images',
        provider: '~/providers/cloudflare-images.ts',
        options: {
          // baseURL: 'https://www.example.com',
          accountHash: '...',
        },
      },
    },
  },

/providers/cloudflare-images.ts:

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

const operationsGenerator = createOperationsGenerator({
  keyMap: {
    width: 'w',
    height: 'h',
    dpr: 'dpr',
    fit: 'fit',
    gravity: 'g',
    quality: 'q',
    format: 'f',
    sharpen: 'sharpen',
  },
  valueMap: {
    fit: {
      cover: 'cover',
      contain: 'contain',
      fill: 'scale-down',
      outside: 'crop',
      inside: 'pad',
    },
    gravity: {
      auto: 'auto',
      side: 'side',
    },
  },
  joinWith: ',',
  formatter: (key, val) => encodeQueryItem(key, val),
});

const defaultModifiers = {};

export const getImage: ProviderGetImage = (
  imageId,
  { modifiers = {}, baseURL, accountHash, variant } = {},
  ctx,
) => {
  const mergeModifiers = { ...defaultModifiers, ...modifiers };
  const operations = operationsGenerator(mergeModifiers as any);

  if (baseURL) {
    baseURL += '/cdn-cgi/imagedelivery/';
  } else {
    baseURL = 'https://imagedelivery.net/';
  }

  return {
    url: variant
      ? joinURL(baseURL, accountHash, imageId, variant)
      : joinURL(baseURL, accountHash, imageId, operations),
  };
};

Maybe someone can pick up and make a PR that also works with variants?