Skip to main content

<Img>

The <Img /> tag can be used like a regular <img> HTML tag.

If you use <Img>, Remotion will ensure that the image is loaded before rendering the frame. That way you can avoid flickers if the image does not load immediately during rendering.

API​

src​

Put an image into the public/ folder and use staticFile() to reference it.

tsx
import { AbsoluteFill, Img, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Img src={staticFile("hi.png")} />
    </AbsoluteFill>
  );
};
tsx
import { AbsoluteFill, Img, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Img src={staticFile("hi.png")} />
    </AbsoluteFill>
  );
};

You can also load a remote image:

tsx
import { AbsoluteFill, Img } from "remotion";
 
export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Img src={"https://picsum.photos/200/300"} />
    </AbsoluteFill>
  );
};
tsx
import { AbsoluteFill, Img } from "remotion";
 
export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Img src={"https://picsum.photos/200/300"} />
    </AbsoluteFill>
  );
};

onError​

To use the <Img> tag in a resilient way, handle the error that occurs when an image can not be loaded:

tsx
import { AbsoluteFill, Img, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Img
        src={staticFile("hi.png")}
        onError={(event) => {
          // Handle image loading error here
        }}
      />
    </AbsoluteFill>
  );
};
tsx
import { AbsoluteFill, Img, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
  return (
    <AbsoluteFill>
      <Img
        src={staticFile("hi.png")}
        onError={(event) => {
          // Handle image loading error here
        }}
      />
    </AbsoluteFill>
  );
};

If an error occurs, the component must be unmounted or the src must be replaced, otherwise the render will time out.

Other props​

Remotion inherits the props of the regular <img> tag, like for example style.

GIFs​

Don't use the <Img> tag for GIFs, use @remotion/gif instead.

Restrictions​

  • The maximum resolution that Chrome can display is 2^29 pixels (539 megapixels) [source]. Remotion inherits this restriction.

See also​