How to read and send static images using Cloudflare worker?

Question

I want to serve static images stored in the root directory of the Cloudflare script.

I tried using

const res = await fetch('./image.png');
const data = await res.blob();

but it isn't working.

There's no file system fs like that we have in Node for reading the static files here.

My aim is to serve dynamically generated images using Cloudflare workers.

Any help is highly appreciated.

Answer 1

Use cloudflare/kv-asset-handler

import { getAssetFromKV } from '@cloudflare/kv-asset-handler'

addEventListener('fetch', (event) => {
    event.respondWith(handleEvent(event))
})

async function handleEvent(event) {
    if (event.request.url.includes('/image.png')) {
        try {
            return await getAssetFromKV(event)
        } catch (e) {
            return new Response('error', { status: 500 })
    } else ...
}