staticFile()
Available from v2.5.7.
Turns a file in your public/
folder into an URL which you can then load into your project.
tsx
import {Img ,staticFile } from "remotion";constmyImage =staticFile (`/my-image.png`);// ...<Img src ={myImage } />;
tsx
import {Img ,staticFile } from "remotion";constmyImage =staticFile (`/my-image.png`);// ...<Img src ={myImage } />;
Example
Start by creating a public/
folder in the root of your video project:
txt
my-video/├─ node_modules/├─ public/│ ├─ my-image.png│ ├─ font.woff2├─ src/│ ├─ Root.tsx│ ├─ index.ts├─ package.json
txt
my-video/├─ node_modules/├─ public/│ ├─ my-image.png│ ├─ font.woff2├─ src/│ ├─ Root.tsx│ ├─ index.ts├─ package.json
The public/
folder should always be in the same folder as your package.json
that contains the remotion
dependency, even if your Remotion code lives in a subdirectory.
Get an URL reference of your asset:
tsx
import {staticFile } from "remotion";constmyImage =staticFile (`/my-image.png`); // "/static-32e8nd/my-image.png"constfont =staticFile (`/font.woff2`); // "/static-32e8nd/font.woff2"
tsx
import {staticFile } from "remotion";constmyImage =staticFile (`/my-image.png`); // "/static-32e8nd/my-image.png"constfont =staticFile (`/font.woff2`); // "/static-32e8nd/font.woff2"
You can now load the asset via:
<Img />
,<Audio/>
,<Video/>
tag- Fetch API
- FontFace()
- Any other loader that supports data fetching via URL
Why can't I just pass a string?
If you are a Create React App or Next.JS user, you might be used to just to be able to reference the asset from a string: <img src="/my-image.png"/>
. Remotion chooses to be different in that you need to use the staticFile()
API because:
- It prevents breaking when deploying your site into a subdirectory of a domain:
https://example.com/my-folder/my-logo.png
- It avoids conflicts with composition names which might share the same name (for example
http://localhost:3000/conflicting-name
while running the studio) - It allows us to make paths framework-agnostic, so your code can work across Remotion, Create React App, Next.JS and potentially other frameworks.
Getting all files in the public folder
Use the getStaticFiles()
API to get a list of available options.
Handling URI-unsafe charactersv4.0.0
Since v4.0
, staticFile()
encodes the filename using encodeURIComponent
.
If you encoded the path by yourself until now, make sure to drop your encoding before passing the path into staticFile()
to avoid double encoding.
Before v4.0
, staticFile()
did not handle URI-unsafe characters contained in the provided path. This could lead to problems in some cases when filenames would contain characters such as #
, ?
and or &
.
Example
Before v4tsx
staticFile("my-image#portrait.png"); //output: "/my-image#portrait.png"
Before v4tsx
staticFile("my-image#portrait.png"); //output: "/my-image#portrait.png"
If this URL is passed to a component accepting an URL, the part after #
will be left out, leading
to an error because the file can't be found.
Since v4.0.0tsx
staticFile("my-image#portrait.png"); // "/my-image%23portrait.png"
Since v4.0.0tsx
staticFile("my-image#portrait.png"); // "/my-image%23portrait.png"
The image will now be loaded properly, however, you must avoid to encode the filename yourself.