Skip to main content

使用 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" />;

参见