使用 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";constmyMarkup = <Img src ="https://picsum.photos/200/300" />;
✅ 这样做tsx
import {AbsoluteFill ,Img } from "remotion";constmyMarkup = <Img src ="https://picsum.photos/200/300" />;