Skip to main content

staticFile()

v2.5.7

将你 public/ 文件夹中的文件转换为 URL，然后你可以将其加载到项目中。

🌐 Turns a file in your public/ folder into an URL which you can then load into your project.

import {Img, staticFile} from 'remotion';

const myImage = staticFile(`/my-image.png`);

// ...

<Img src={myImage} />;

示例​

🌐 Example

首先在你的视频项目根目录下创建一个 public/ 文件夹：

🌐 Start by creating a public/ folder in the root of your video project:

my-video/
├─ node_modules/
├─ public/
│  ├─ my-image.png
│  ├─ font.woff2
├─ src/
│  ├─ Root.tsx
│  ├─ index.ts
├─ package.json
info

public/ 文件夹应始终与包含 remotion 依赖的 package.json 位于同一文件夹中，即使你的 Remotion 代码位于子目录中。

获取你的资源的 URL 引用：

🌐 Get an URL reference of your asset:

import {staticFile} from 'remotion';

const myImage = staticFile(`/my-image.png`); // "/static-32e8nd/my-image.png"
const font = staticFile(`/font.woff2`); // "/static-32e8nd/font.woff2"

你现在可以通过以下方式加载资源：

🌐 You can now load the asset via:

我为什么不能直接传递一个字符串？​

🌐 Why can't I just pass a string?

如果你是 Create React App 或 Next.JS 的用户，你可能已经习惯于只需使用一个字符串来引用资源：<img src="/my-image.png"/>。Remotion 选择采取不同的方式，你需要使用 staticFile() API，因为：

🌐 If you are a Create React App or Next.JS user, you might be used to just to be able to reference the asset from a string: <img src="/my-image.png"/>. Remotion chooses to be different in that you need to use the staticFile() API because:

  • 它可以防止在将你的网站部署到域名的子目录时出现故障：https://example.com/my-folder/my-logo.png
  • 它避免了与可能同名的合成名称发生冲突（例如在运行工作室时的 http://localhost:3000/conflicting-name）
  • 它允许我们使路径与框架无关，因此你的代码可以在 Remotion、Create React App、Next.JS 以及潜在的其他框架中运行。

获取公共文件夹中的所有文件​

🌐 Getting all files in the public folder

使用 getStaticFiles() API 获取可用选项列表。

🌐 Use the getStaticFiles() API to get a list of available options.

处理 URI 不安全字符v4.0.0​

🌐 Handling URI-unsafe charactersv4.0.0

自 v4.0 起，staticFile() 使用 encodeURIComponent 对文件名进行编码。
如果你直到现在一直自己对路径进行编码，请确保在将路径传入 staticFile() 之前去掉你的编码，以避免重复编码。

🌐 Since v4.0, staticFile() encodes the filename using encodeURIComponent.
If you encoded the path by yourself until now, make sure to drop your encoding before passing the path into staticFile() to avoid double encoding.

在 v4.0 之前，staticFile() 无法处理提供的路径中包含的 URI 不安全字符。在某些情况下，当文件名包含诸如 #、? 或 & 的字符时，这可能会导致问题。

🌐 Before v4.0, staticFile() did not handle URI-unsafe characters contained in the provided path. This could lead to problems in some cases when filenames would contain characters such as #, ? and or &.

示例​

🌐 Example

Before v4
staticFile('my-image#portrait.png'); //output: "/my-image#portrait.png"

如果将此 URL 传递给接受 URL 的组件，# 之后的部分将被省略，导致错误，因为找不到该文件。

🌐 If this URL is passed to a component accepting an URL, the part after # will be left out, leading to an error because the file can't be found.

Since v4.0.0
staticFile('my-image#portrait.png'); // "/my-image%23portrait.png"

图片现在将能够正确加载，但是，你必须避免自己编码文件名。

🌐 The image will now be loaded properly, however, you must avoid to encode the filename yourself.

兼容性​

🌐 Compatibility

BrowsersServersEnvironments
Chrome
Firefox
Safari
Node.js
Bun
Serverless Functions
Uses / as prefix
Uses / as prefix
Uses / as prefix
Uses / as prefix

另请参阅​

🌐 See also

Last updated on