---
sidebar_position: 6
---

# Handle static assets

Modern.js Module will handle static assets used in the code. If configuration is required, then the [`buildConfig.asset`](/en/api/config/build-config#asset) API can be used.

## Default behavior

By default, Modern.js Module handles the following static assets:

- `'.svg'`、`'.png'`、`'.jpg'`、`'.jpeg'`、`'.gif'`、`'.webp'`
- `'.ttf'`、`'.otf'`、`'.woff'`、`'.woff2'`、`'.eot'`
- `'.mp3'`、`'.mp4'`、`'.webm'`、`'.ogg'`、`'.wav'`、`'.flac'`、`'.aac'`、`'.mov'`

For the handling of static files, Modern.js Module currently supports the following functions.

- Set the static asset path to `. /assets`.
- Files less than **10kb** will be inlined into the code.

## Example

Let us look at the following example:

- Project source code:

```ts title="./src/asset.ts"
import img from './bg.png';
//...
```

- If the size of `bg.png` is less than 10 kb, then the output directory structure and file content are.

```bash
./dist
└── asset.js
```

```js title="./dist/asset.js"
var bg_default = 'data:image/png;base64,';
console.info(bg_default);
```

- If the size of `bg.png` is larger than 10 kb, then the output directory structure and file content are.

```bash
./dist
├── asset.js
└── assets
    └── bg.13e2aba2.png
```

```js title="./dist/asset.js"
import img from './assets/bg.13e2aba2.png';
console.info(img);
```

When wanting to modify the default behavior, the following API can be used:

- `asset.path`: modify the output path of the static assets.
- `asset.limit`: modify the threshold value for inline assets.