_public.api.image._index.tsx

import type { LoaderArgs, LoaderFunction } from '@remix-run/cloudflare';
import type { MimeType, Resolver } from 'remix-image/serverPure';
import { MemoryCache, RemixImageError, fetchResolver, imageLoader } from 'remix-image/serverPure';
import { ContextHack } from '~/data/types';

const cache = new MemoryCache({
  maxSize: 5e7,
});

const SELF_URL = 'http://localhost:8788';

export const loader: LoaderFunction = ({ request, context }: LoaderArgs & ContextHack) => {
  const resolver: Resolver = async (asset, url, options, basePath) => {
    if (asset.startsWith('/') && (asset.length === 1 || asset[1] !== '/')) {
      const imageResponse = await context.ASSETS.fetch(url, request.clone());
      const arrBuff = await imageResponse.arrayBuffer();

      if (!arrBuff || arrBuff.byteLength < 2) {
        throw new RemixImageError('Invalid image retrieved from resolver!');
      }

      const buffer = new Uint8Array(arrBuff);
      const contentType = imageResponse.headers.get('content-type')! as MimeType;

      return {
        buffer,
        contentType,
      };
    } else {
      return fetchResolver(asset, url, options, basePath);
    }
  };

  const config = {
    selfUrl: SELF_URL,
    cache,
    resolver,
  };

  return imageLoader(config, request);
};