絕對路徑

可以在 Remotion 中使用絕對路徑引用資源嗎？

不建議使用絕對路徑。 Remotion 使用 staticFile() 函式來引用 public/ 目錄中的資源，這是跨環境（本地開發、Lambda 渲染、Docker 等）都能正常運作的正確方式。

為什麼不應該使用絕對路徑？

使用如 /Users/yourname/project/public/video.mp4 這樣的絕對路徑有以下問題：

跨環境不相容：本地機器上的路徑在 Lambda、Docker 或 CI/CD 環境中完全無效
跨作業系統問題：Windows、macOS、Linux 的路徑格式不同
跨開發者問題：不同開發者的本地路徑不同，導致程式碼無法共享
安全性問題：暴露檔案系統結構可能帶來安全隱患

如何正確引用靜態資源？

將資源放置在 public/ 目錄中，並使用 staticFile() 函式引用：

import { staticFile } from "remotion";
 
// 正確方式
const videoSrc = staticFile("my-video.mp4");
const imageSrc = staticFile("images/logo.png");
const audioSrc = staticFile("audio/background.mp3");

staticFile() 會自動根據當前執行環境（本地、Lambda、Docker）解析正確的路徑。

`public/` 目錄的結構是什麼？

my-remotion-project/
├── public/
│   ├── video.mp4
│   ├── audio/
│   │   └── background.mp3
│   └── images/
│       └── logo.png
├── src/
│   └── MyComposition.tsx
└── remotion.config.ts

staticFile("audio/background.mp3") 會對應到 public/audio/background.mp3。

如果資源不在 `public/` 目錄中，我應該怎麼辦？

有幾個選項：

選項一：移動資源到 public/ 目錄（推薦）

這是最簡單、最可靠的方式。

選項二：在 Webpack 設定中添加額外的資源目錄

// remotion.config.ts
import { Config } from "@remotion/cli/config";
 
Config.overrideWebpackConfig((currentConfiguration) => {
  return {
    ...currentConfiguration,
    // 自訂設定
  };
});

選項三：使用遠端 URL

如果資源托管在遠端（如 S3、CDN），直接使用 HTTPS URL 即可，不需要 staticFile()。

使用動態路徑時怎麼辦？

動態路徑（由 Props 傳入的檔案名稱）同樣應透過 staticFile() 處理：

interface MyComponentProps {
  backgroundImage: string;
}
 
export const MyComponent: React.FC<MyComponentProps> = ({ backgroundImage }) => {
  return (
    <img src={staticFile(backgroundImage)} />
  );
};

呼叫時傳入相對於 public/ 的路徑：

inputProps: {
  backgroundImage: "backgrounds/sunset.jpg"
}

Lambda 渲染時如何處理資源？

在 Lambda 渲染時，你的 public/ 目錄中的資源會被 Webpack 打包進 bundle，並部署到 S3。staticFile() 函式在 Lambda 環境中會自動解析成 S3 上的 URL。

因此，只要使用 staticFile()，不需要任何額外設定即可在 Lambda 環境中正確引用資源。

如何確認資源路徑是否正確？

在 Remotion Studio 的開發模式下，如果資源無法載入，瀏覽器的開發者工具（F12）中的 Network 標籤會顯示 404 錯誤，幫助你確認路徑是否正確。

你也可以直接在瀏覽器中訪問 http://localhost:3000/public/your-asset.mp4（在 Remotion Studio 執行時）來確認資源是否可存取。

`import` 和 `staticFile()` 有什麼區別？

import：適合在 Webpack 打包時就已知的靜態資源（圖片、字型等），Webpack 會處理版本雜湊和最佳化
staticFile()：適合在執行時動態決定路徑的資源，或大型媒體檔案（影片、音訊）

對於影片和音訊檔案，強烈建議使用 staticFile()，因為這些檔案通常較大，不適合由 Webpack 處理。