Skip to main content

​
Importing assets in Remotion

​
The public folder

Place assets in the public/ folder at your project root.

​
Using staticFile()

You MUST use staticFile() to reference files from the public/ folder: 
import {Img, staticFile} from 'remotion';

export const MyComposition = () => {
  return <Img src={staticFile('logo.png')} />;
};
The function returns an encoded URL that works correctly when deploying to subdirectories.

​
Using with components

Images: 
import {Img, staticFile} from 'remotion';

<Img src={staticFile('photo.png')} />;
Videos: 
import {Video} from '@remotion/media';
import {staticFile} from 'remotion';

<Video src={staticFile('clip.mp4')} />;
Audio: 
import {Audio} from '@remotion/media';
import {staticFile} from 'remotion';

<Audio src={staticFile('music.mp3')} />;
Fonts: 
import {staticFile} from 'remotion';

const fontFamily = new FontFace('MyFont', `url(${staticFile('font.woff2')})`);
await fontFamily.load();
document.fonts.add(fontFamily);

​
Remote URLs

Remote URLs can be used directly without staticFile(): 
<Img src="https://example.com/image.png" />
<Video src="https://remotion.media/video.mp4" />

​
Important notes

  • Remotion components (<Img>, <Video>, <Audio>) ensure assets are fully loaded before rendering
  • Special characters in filenames (#, ?, &) are automatically encoded