アセットURLインポート
appフォルダ内のファイルは、モジュールにインポートできます。Remixは次の処理を行います。
- ファイルをブラウザビルドディレクトリにコピーします
- ファイルのフィンガープリントを生成して長期キャッシュを実現します
- モジュールにパブリックURLを返し、レンダリング時に使用します
これはスタイルシートでよく使われますが、定義済みのローダーがあれば、どんなファイルタイプでも使用できます。
import type { LinksFunction } from "@remix-run/node"; // または cloudflare/deno
import banner from "./images/banner.jpg";
import styles from "./styles/app.css";
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: styles },
];
export default function Page() {
return (
<div>
<h1>Some Page</h1>
<img src={banner} />
</div>
);
}