使用 Next.js <Image> tag 时闪烁

在 Remotion 中不推荐使用以下代码：

🌐 The following code is discouraged in Remotion:

❌ Don't do this
import Image from "next/image";

const myMarkup = <Image src="https://picsum.photos/200/300"></Image>;

问题

🌐 Problem

Remotion 无法知道图片何时加载完成，因为通过 <Image> 加载图片时不可能确定加载是否完成。

🌐 Remotion has no way of knowing when the image is finished loading because it is impossible to determine so when loading an image through <Image>.

这将导致 Remotion 在渲染过程中不等待图片加载，从而引起明显的闪烁。

🌐 This will lead to Remotion not waiting for the image to be loaded during rendering and cause visible flickers.

🌐 Solution

改用<Img>标签：

🌐 Use the <Img> tag instead:

✅ Do this
import { AbsoluteFill, Img } from "remotion";

const myMarkup = <Img src="https://picsum.photos/200/300" />;

🌐 See also