Cloudflare Fetch Private Image

Example showcasing the use of a Cloudflare Worker and a React client to fetch private images from the cloudflare image delivery service.

Add Environment Variables

Client

Rename the .env.example to .env and set the following variable:

VITE_IMAGE_WORKER_URL=

You'll also need to set the following variables in the FetchPrivateImageExample.tsx file.

const IMAGE_ID = "";
const VARIANT_NAME = ""; # by default cloudflare sets the name to 'public'.

Worker

Rename the wrangler.image-worker.toml.example to wrangler.image-worker.toml and set the following variables:

ACCOUNT_HASH = ""     # Navigate to the cloudflare Images Tab. There you'll find the hash.
IMAGES_API_TOKEN = "" # Navigate to the cloudflare Images/Keys Tab. That's where you'll find your token.

Deployment

To deploy the worker, execute the following:

npm run deploy:worker
-or-
pnpm run deploy:worker

Run the Client

To start the client, execute the following:

npm run dev
-or-
pnpm run dev