Skip to main content

使用绝对路径的文件

为什么无法使用绝对路径来引用资源?

这不起作用
tsx
import { Img } from "remotion";
const MyComp: React.FC = () => {
return <Img src="C://Users/Joe/Documents/image.png" />;
};
这不起作用
tsx
import { Img } from "remotion";
const MyComp: React.FC = () => {
return <Img src="C://Users/Joe/Documents/image.png" />;
};

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

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

只有 public 文件夹受到 Web 框架支持

为了允许导入资源,用于制作 Web 应用程序的框架(如 Next.js、Vite、Remix 或 Create React App)会公开 public 文件夹。

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

允许从任何文件夹导入资源将打破这个约定,并且它们将无法在 Remotion Player 中显示。

public 文件夹约定

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

在 Next.js、Remix 和 Vite 中,如果您有一个文件 public/image.png,您可以通过 "http://localhost:3000/image.png""/image.png" 访问它。

在 Remotion 中,您需要将路径包装在 staticFile() 中,因此它将是 staticFile("image.png")
这可以确保在网页未在根路径 / 上提供的情况下(例如在 Remotion LambdaRemotion Cloud Run 上),资源可以正确加载。

通过使用 staticFile(),您可以从 public 文件夹导入资源,并且它也会自动在 Remotion Studio 中以及在 Remix、Vite、Next.js 和 Create React App 中工作,如果您正在使用 Remotion Player

绝对路径不具备可移植性

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

捆绑后,捆绑包也可以上传并托管在互联网上,这就是 Remotion LambdaRemotion Cloud Run 所做的,也是使用 常规渲染 可能实现的。

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

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

虽然理论上 Remotion 可以通过 HTTP 提供完整的文件系统以便通过浏览器访问,但这将是一个安全风险。
任何应用程序或网站都可以通过发出 HTTP 请求来读取您计算机上的任何文件。

替代方法

使用 public 文件夹

最好将文件复制到 public 文件夹,并使用 staticFile()导入资产

解决方法:使用 npx serve

有时,最好不将所有资产复制到您的 Remotion 项目中,因为它们太大。

在这种情况下,您可以使用 npx serve 来通过 HTTP 在您的计算机上提供文件夹。

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

您将获得一个 URL,您可以使用它通过 HTTP 访问文件夹。
将资产的 URL 传递给 <Img><Video><OffthreadVideo><Audio><Gif> 标签以在 Remotion 中使用它们。

如果需要以编程方式生成服务器,请使用 serve-handler

另请参阅