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 Lambda 和 Remotion Cloud Run 上），资源可以正确加载。

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

绝对路径不具备可移植性​

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

捆绑后，捆绑包也可以上传并托管在互联网上，这就是 Remotion Lambda 和 Remotion 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。

另请参阅​