使用绝对路径的文件
为什么无法使用绝对路径来引用资源?
这不起作用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
文件夹约定
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
。