---
sidebar_position: 6
---

# Handle static resource files

The module project will handle static resources 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, module projects are processed for the following static resources:

- `'.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, the module project currently supports the following functions.

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

Let us look at the following example:

<CH.Spotlight>

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

---

Project source code.


---

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

<CH.Code>

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

---

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

</CH.Code>

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

<CH.Code>

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

---

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

</CH.Code>

</CH.Spotlight>

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

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

