使用 Next.js <Image> 标签时出现闪烁

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

❌ 不要这样做
tsx
import Image from "next/image";
const myMarkup = <Image src="https://picsum.photos/200/300"></Image>;

❌ 不要这样做
tsx
import Image from "next/image";
const myMarkup = <Image src="https://picsum.photos/200/300"></Image>;

问题

Remotion 无法知道图像何时加载完成，因为通过 <Image> 加载图像时无法确定。

这将导致 Remotion 在渲染过程中不等待图像加载完成，从而导致可见的闪烁。

改用 <Img> 标签：

✅ 这样做
tsx
import { AbsoluteFill, Img } from "remotion";
 
const myMarkup = <Img src="https://picsum.photos/200/300" />;

✅ 这样做
tsx
import { AbsoluteFill, Img } from "remotion";
 
const myMarkup = <Img src="https://picsum.photos/200/300" />;