Asset URL Imports

Any files inside the app folder can be imported into your modules. Remix will:

Copy the file to your browser build directory
Fingerprint the file for long-term caching
Return the public URL to your module to be used while rendering

It's most common for stylesheets, but can used for anything.

import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno

import banner from "./images/banner.jpg";
import styles from "./styles/app.css";

export const links: LinksFunction = () => {
  return [{ rel: "stylesheet", href: styles }];
};

export default function Page() {
  return (
    <div>
      <h1>Some Page</h1>
      <img src={banner} />
    </div>
  );
}

•

Docs and examples licensed under MIT