Jacob Paris
← Back to all content

Serve an image from a resource route

Remix uses esbuild to bundle your app. When you import a file, esbuild will use its file-loader to copy the file to the public build directory and return the path to the file. This is useful for images, fonts, and other static assets.

A resource route can fetch the image from this path and return it as a response to serve it to the client.

import { LoaderFunctionArgs } from "@remix-run/node"
import image from "./image.jpg"
export async function loader({ request }: LoaderFunctionArgs) {
const url = new URL(request.url)
url.pathname = image
const imageBuffer = await fetch(url).then(
(res) => res.body,
return new Response(imageBuffer, {
headers: {
"Content-Type": "image/jpeg",
Professional headshot

Hey there! I'm a developer, designer, and digital nomad building cool things with Remix, and I'm also writing Moulton, the Remix Community Newsletter

About once per month, I send an email with:

  • New guides and tutorials
  • Upcoming talks, meetups, and events
  • Cool new libraries and packages
  • What's new in the latest versions of Remix

Stay up to date with everything in the Remix community by entering your email below.

Unsubscribe at any time.