Skip to main content

Flickering when using Next.js <Image> tag

The following code is discouraged in Remotion:

❌ Don't do this
tsx
import Image from "next/image";
const myMarkup = <Image src="https://picsum.photos/200/300"></Image>;
❌ Don't do this
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 <Img> tag instead:

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

See also​