Back to Remotion

Flickering when using Next.js tag

packages/docs/docs/troubleshooting/nextjs-image.mdx

4.0.460845 B
Original Source

The following code is discouraged in Remotion:

tsx
import Image from "next/image";

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

Problem

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>.

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

Solution

Use the `` tag instead:

tsx
const src = "abc";
// ---cut---
import { AbsoluteFill, Img } from "remotion";

const myMarkup = ;

See also