Remotion LabRemotion Lab
›疑難排解›Next.js Image 元件閃爍問題

Next.js Image 元件閃爍問題

在 Remotion 中使用 Next.js 的 Image 元件會導致渲染閃爍，說明原因與替代方案

問題說明

在 Remotion 中使用 Next.js 的 <Image> 元件是不建議的做法：

// 不建議這樣做
import Image from "next/image";
 
const myMarkup = <Image src="https://picsum.photos/200/300" alt="示例圖片" />;

根本原因

Remotion 在渲染時無法得知 Next.js <Image> 元件的圖片是否已完成載入。

Next.js 的 <Image> 元件使用了自己內部的載入機制與延遲載入（lazy loading）策略，這些機制不會向 Remotion 的渲染管線回報載入狀態。

因此，Remotion 不會等待圖片載入完成就截取畫面，導致：

  • 渲染輸出中出現可見的閃爍
  • 部分幀出現空白或損壞的圖片
  • 影片輸出品質不一致

解決方案

改用 Remotion 的 <Img> 元件

將 Next.js 的 <Image> 替換為 Remotion 提供的 <Img> 元件：

// 正確做法
import { Img } from "remotion";
 
const myMarkup = <Img src="https://picsum.photos/200/300" />;

Remotion 的 <Img> 元件會在圖片完全載入之前暫停渲染，確保每一幀都顯示完整的圖片內容。

完整的使用範例

import { AbsoluteFill, Img, useVideoConfig } from "remotion";
 
export const MyScene = () => {
  const { width, height } = useVideoConfig();
 
  return (
    <AbsoluteFill>
      {/* 背景圖片 */}
      <AbsoluteFill>
        <Img
          src="https://picsum.photos/1920/1080"
          style={{
            width: "100%",
            height: "100%",
            objectFit: "cover",
          }}
        />
      </AbsoluteFill>
 
      {/* 前景內容 */}
      <AbsoluteFill
        style={{
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <h1 style={{ color: "white", fontSize: 72 }}>Hello Remotion</h1>
      </AbsoluteFill>
    </AbsoluteFill>
  );
};

使用本地靜態檔案

若圖片是放在 public/ 資料夾中的靜態檔案，使用 staticFile() 搭配 <Img>：

import { AbsoluteFill, Img, staticFile } from "remotion";
 
export const MyScene = () => {
  return (
    <AbsoluteFill>
      <Img
        src={staticFile("my-image.png")}
        style={{ width: "100%", height: "100%" }}
      />
    </AbsoluteFill>
  );
};

Next.js <Image> vs Remotion <Img> 比較

特性Next.js <Image>Remotion <Img>
渲染時載入追蹤不支援支援
延遲載入優化有（不適合渲染）無（適合渲染）
圖片尺寸最佳化有無
Remotion 渲染相容性不相容完全相容
適用場景Next.js 網頁Remotion 影片

常見問題

我需要 Next.js 的圖片優化功能怎麼辦？

在 Remotion 的影片製作情境中，圖片優化（如格式轉換、尺寸壓縮）通常不是必要的，因為影片渲染本身需要原始品質的圖片。建議直接使用原始圖片 URL 搭配 Remotion 的 <Img> 元件。

我同時在 Next.js 專案中使用 Remotion 怎麼辦？

如果你在 Next.js 專案中整合 Remotion（例如使用 @remotion/player 嵌入影片播放器），請在 Remotion 的組件內一律使用 Remotion 的 <Img>，在 Next.js 的頁面組件中才使用 Next.js 的 <Image>。

延伸閱讀