资源 URL 导入

¥Asset URL Imports

app 文件夹中的任何文件都可以导入到你的模块中。Remix 将：

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

1. 将文件复制到浏览器的构建目录

   ¥Copy the file to your browser build directory

2. 为长期缓存文件添加指纹

   ¥Fingerprint the file for long-term caching

3. 返回渲染时模块的公共 URL。

   ¥Return the public URL to your module to be used while rendering

它最常用于样式表，但使用 定义的加载器 后，它可以用于任何文件类型。

¥It's most common for stylesheets but can be used for any file type with a defined loader.

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 = () => [
  { rel: "stylesheet", href: styles },
];

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