---
name: assets
description: Remotionへの画像、動画、オーディオ、フォントのインポート
metadata:
tags: assets, staticFile, images, fonts, public
---
# Remotionでのアセットのインポート
## publicフォルダ
プロジェクトルートの `public/` フォルダにアセットを配置します。
## staticFile() の使用
`public/` フォルダのファイルを参照するには `staticFile()` を必ず使用してください:
```tsx
import {Img, staticFile} from 'remotion';
export const MyComposition = () => {
return })
;
};
```
この関数は、サブディレクトリへのデプロイ時にも正しく動作するエンコードされたURLを返します。
## コンポーネントとの使用
**画像:**
```tsx
import {Img, staticFile} from 'remotion';
})
;
```
**動画:**
```tsx
import {Video} from '@remotion/media';
import {staticFile} from 'remotion';
;
```
**オーディオ:**
```tsx
import {Audio} from '@remotion/media';
import {staticFile} from 'remotion';
;
```
**フォント:**
```tsx
import {staticFile} from 'remotion';
const fontFamily = new FontFace('MyFont', `url(${staticFile('font.woff2')})`);
await fontFamily.load();
document.fonts.add(fontFamily);
```
## リモートURL
リモートURLは `staticFile()` なしで直接使用できます:
```tsx
```
## 重要な注意事項
- Remotionコンポーネント（`![]()
`、`