Setting the file. One moment.
Subchapter 7.16
images.mdMarkdown1 KBView on GitHub
Use template literals for dynamic file references:
import { Img, staticFile, useCurrentFrame } from "remotion";
const frame = useCurrentFrame();
// Image sequence
<Img src={staticFile(`frames/frame${frame}.png`)} />
// Selecting based on props
<Img src={staticFile(`avatars/${props.userId}.png`)} />
// Conditional images
<Img
src={staticFile(`icons/${isActive ? "active" : "inactive"}.svg`)}
/>This pattern is useful for:
Use getImageDimensions() to get the dimensions of an image:
import { getImageDimensions, staticFile } from "remotion";
const { width, height } = await getImageDimensions(staticFile("photo.png"));This is useful for calculating aspect ratios or sizing compositions:
import {
getImageDimensions,
staticFile,
CalculateMetadataFunction,
} from "remotion";
const calculateMetadata: CalculateMetadataFunction = async () => {
const { width, height } = await getImageDimensions(staticFile("photo.png"));
return {
width,
height,
};
};