具有绝对路径的文件

为什么不可能使用绝对路径来引用资源？

🌐 Why is it not possible to use absolute paths to require assets?

This does not work
import {Img} from 'remotion';

const MyComp: React.FC = () => {
  return <Img src="C://Users/Joe/Documents/image.png" />;
};

浏览器无法访问你的文件系统

🌐 Browsers don't have access to your filesystem

Remotion 在预览时运行在浏览器中，在渲染时运行在无头浏览器中。 默认情况下，浏览器无法访问你的文件系统。要读取任何文件，它们需要通过 HTTP 服务器提供。

🌐 Remotion runs in a browser during preview and in a headless browser during rendering.
By default, browsers don't have access to your filesystem. To read any files, they need to be served via an HTTP server.

只有 public 文件夹被网络框架支持

🌐 Only the public folder is supported by web frameworks

为了允许导入资源，像 Next.js、Vite、React Router 或 Create React App 这样的用于创建 web 应用的框架会公开 public 文件夹。

🌐 To allow importing assets, frameworks for making web apps such as Next.js, Vite, React Router or Create React App expose the public folder.

我们在 Remotion 中遵循这一约定，以便在各个框架之间实现无缝的代码重用——出现在 Remotion Studio 中的资源也会出现在 Remotion Player 中。

🌐 We follow this convention in Remotion to allow for seamless code reuse across frameworks - assets that show up in the Remotion Studio also show up in the Remotion Player.

允许从任何文件夹导入资源会破坏这一约定，并且它们无法在 Remotion 播放器中显示。

🌐 Allowing assets to be imported from any folder would break this convention, and they could not be displayed in the Remotion Player.

public 文件夹约定

Remotion 实现了一种约定，即项目中的 public 文件夹通过 HTTP 服务器公开，并且可以在与你的开发服务器相同的域上访问。

在 Next.js、React Router 和 Vite 中，如果你有一个文件 public/image.png，你可以通过 "http://localhost:3000/image.png" 访问它，或者直接通过 "/image.png"

🌐 In Next.js, React Router, and Vite, if you have a file public/image.png, you can access it via "http://localhost:3000/image.png", or just "/image.png"

在 Remotion 中，你需要将路径封装在 staticFile() 中，所以它将是 staticFile("image.png")。 这可以确保如果网页没有在根路径 / 上提供服务时，资源也能被正确加载，这在 Remotion Lambda 和 Remotion Cloud Run 上的情况是如此。

🌐 In Remotion you need to wrap the path in staticFile(), so it would be staticFile("image.png").
This ensures that assets are loaded correctly if the webpage is not served on the root path /, which is the case on Remotion Lambda and Remotion Cloud Run.

通过使用 staticFile()，你可以从公共文件夹导入资源，它也会自动在 Remotion Studio 中工作，同时在使用 Remotion Player 的情况下，也适用于 React Router、Vite、Next.js 和 Create React App。

🌐 By using staticFile(), you can import assets from the public folder, and it will automatically also work in Remotion Studio as well as React Router, Vite, Next.js and Create React App in case you are using the Remotion Player.

绝对路径不可移植

🌐 Absolute paths are not portable

在渲染视频之前，代码会被打包以减少需要发送到浏览器的资源的大小。你的项目及其 node_modules 文件夹可能有数百兆字节大，但通过打包，大小会大幅减少。

🌐 Before rendering a video, code is bundled to reduce the size of the assets that need to be sent to the browser. Your project with it's node_modules folder would be hundreds of megabytes large, but by bundling, the size is reduced drastically.

一个打包包也可以上传并托管在互联网上，这正是 Remotion Lambda 和 Remotion Cloud Run 所做的，并且使用 常规渲染 也可以实现。

🌐 A bundle can also be uploaded and hosted on the internet, which is what Remotion Lambda and Remotion Cloud Run do and what is also possible using regular rendering.

因为目标是减小包的大小，所以只有 public 会被复制到包中。 具有绝对路径的文件不会被复制到包中，因此在另一台设备上渲染时无法使用。

🌐 Because the goal is to reduce the size of the bundle, only the public gets copied into the bundle.
Files with an absolute path would not be copied into the bundle, and therefore not be available when rendering on another device.

通过 HTTP 提供文件系统是危险的

🌐 Serving the filesystem via HTTP is dangerous

虽然理论上 Remotion 可以通过 HTTP 提供完整的文件系统，从而可以通过浏览器访问，但这将构成安全风险。任何应用或网站都可以通过发出 HTTP 请求来读取你计算机上的任何文件。

🌐 While Remotion could theoretically serve the full filesystem via HTTP so it is accessible via browser, this would be a security risk.
Any application or website could then read any file on your computer by making a HTTP request.

改做什么

🌐 What to do instead

使用 public 文件夹

🌐 Use the public folder

最好将文件复制到 public 文件夹和 staticFile() 以 导入资源。

🌐 Preferrably, copy files into the public folder and staticFile() to import assets.

解决方法：使用 npx serve

🌐 Workaround: Use npx serve

有时，不把所有资源复制到你的 Remotion 项目中更为可取，因为它们太大了。

🌐 Sometimes, it is preferrable to not copy all assets into your Remotion project because they are too large.

在这种情况下，你可以使用 npx serve 通过 HTTP 提供你电脑上的一个文件夹。

🌐 In this case, you can use npx serve to serve a folder on your computer via HTTP.

npx serve --cors C://Users/Joe/Documents

你将获得一个可以通过 HTTP 访问该文件夹的 URL。 将资源的 URL 传递给 <Img>、<Video>、<OffthreadVideo>、<Audio>、<Gif>、<Html5Video>、<Html5Audio> 标签，以便在 Remotion 中使用它们。

🌐 You will get a URL that you can use to access the folder via HTTP.
Pass URLs of assets to <Img>, <Video>, <OffthreadVideo>, <Audio>, <Gif>, <Html5Video>, <Html5Audio> tags to use them in Remotion.

如果你需要以编程方式启动服务器，请使用 serve-handler。

🌐 If you need to spawn a server programmatically, use serve-handler.

另请参阅

🌐 See also

• 导入资源