靜態資源

public 資料夾

Remotion 專案的 public/ 資料夾用來存放靜態資源（圖片、影片、音訊、字型等）。使用 staticFile() 來引用這些檔案：

import { staticFile, Img } from "remotion";
 
export const MyScene: React.FC = () => {
  return (
    <Img src={staticFile("logo.png")} style={{ width: 200 }} />
  );
};

staticFile("logo.png") 會解析為 public/logo.png 的路徑。

為什麼用 staticFile()？

你可能會想直接寫 "/logo.png"，但 staticFile() 有幾個優勢：

• 路徑驗證 — 如果檔案不存在，會在開發時就給你警告
• 打包相容 — 確保在不同環境（開發、渲染、部署）中路徑都正確
• 類型安全 — TypeScript 會幫你檢查

使用圖片

Remotion 提供 <Img> 元件（注意大寫 I），它會等圖片載入完成才讓渲染繼續：

import { Img, staticFile } from "remotion";
 
// 本地圖片
<Img src={staticFile("photo.jpg")} />
 
// 遠端圖片
<Img src="https://example.com/image.png" />

重要：不要用原生的 <img> 標籤，因為它不會等待載入完成，可能導致渲染出空白的幀。

使用 SVG

SVG 可以直接 import 或用 <Img> 載入：

// 方式一：直接 inline
export const Icon: React.FC = () => (
  <svg viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="#6366f1" />
  </svg>
);
 
// 方式二：從檔案載入
<Img src={staticFile("icon.svg")} />

組織資料夾結構

建議按用途分類：

public/
  fonts/
    NotoSansTC-Bold.woff2
  images/
    logo.png
    background.jpg
  audio/
    bgm.mp3
  video/
    intro.mp4

小結

• 靜態資源放在 public/ 資料夾
• 用 staticFile() 引用，確保路徑正確
• 用 <Img> 載入圖片（自動等待載入完成）
• 不要用原生 <img> 標籤