Skip to main content

Creating a Resolver

You may want to create a Resolver if you want to retrieve images in a way that is not currently supported by this library. An example could be retrieving images stored on an authenticated server that is separate from your app.


To make your own, just make a function that follows the Resolver format:

export type Resolver = (
asset: string,
url: string,
options: TransformOptions,
basePath: string
) => Promise<{
buffer: Uint8Array;
contentType: MimeType;

such as:

import { fsResolver, fetchResolver, Resolver } from "remix-image/server";

export const myResolver: Resolver = async (asset, url, options, basePath) => {
if (url.startsWith("/") && (url.length === 1 || url[1] !== "/")) {
return fsResolver(asset, url, options, basePath);
} else {
return fetchResolver(asset, url, options, basePath);

You will then provide this function to the resolver field of the loader config

import type { LoaderFunction } from "remix";
import { imageLoader } from "remix-image/server";
import myResolver from "...";

const config = {
selfUrl: "http://localhost:3000",
whitelistedDomains: [""],
resolver: myResolver,

export const loader: LoaderFunction = ({ request }) => {
return imageLoader(config, request);


Show Off

Create something cool that you think others would use? Upload it to GitHub and show it off on the Remix-Image repo!