# Static Files - `StaticFiles`

You can use the `StaticFiles` class to serve static files, like JavaScript, CSS, images, etc.

Read more about it in the [FastAPI docs for Static Files](https://fastapi.tiangolo.com/tutorial/static-files/).

You can import it directly from `fastapi.staticfiles`:

```python
from fastapi.staticfiles import StaticFiles
```

from starlette.staticfiles import StaticFiles as StaticFiles  # noqa...

# 정적 파일 { #static-files }

`StaticFiles`를 사용하면 디렉터리에서 정적 파일을 자동으로 제공할 수 있습니다.

## `StaticFiles` 사용 { #use-staticfiles }

* `StaticFiles`를 임포트합니다.
* 특정 경로에 `StaticFiles()` 인스턴스를 "마운트"합니다.

{* ../../docs_src/static_files/tutorial001_py310.py hl[2,6] *}

/// note | 기술 세부사항

`from starlette.staticfiles import StaticFiles`를 사용할 수도 있습니다.

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

app = FastAPI()

You can serve static files automatically from a directory using `StaticFiles`.

## Use `StaticFiles` { #use-staticfiles }

* Import `StaticFiles`.
* "Mount" a `StaticFiles()` instance in a specific path.

{* ../../docs_src/static_files/tutorial001_py310.py hl[2,6] *}

/// note | Technical Details

You could also use `from starlette.staticfiles import StaticFiles`.

# 靜態檔案 { #static-files }

你可以使用 `StaticFiles` 從某個目錄自動提供靜態檔案。

## 使用 `StaticFiles` { #use-staticfiles }

- 匯入 `StaticFiles`。
- 在特定路徑上「掛載」一個 `StaticFiles()` 實例。

{* ../../docs_src/static_files/tutorial001_py310.py hl[2,6] *}

/// note | 技術細節

你也可以使用 `from starlette.staticfiles import StaticFiles`。

**FastAPI** 為了方便開發者，提供與 `starlette.staticfiles` 相同的介面作為 `fastapi.staticfiles`。但它其實是直接來自 Starlette。

///

from fastapi import FastAPI
from fastapi.openapi.docs import (
    get_redoc_html,
    get_swagger_ui_html,
    get_swagger_ui_oauth2_redirect_html,
)
from fastapi.staticfiles import StaticFiles

app = FastAPI(docs_url=None, redoc_url=None)

app.mount("/static", StaticFiles(directory="static"), name="static")


@app.get("/docs", include_in_schema=False)
async def custom_swagger_ui_html():
    return get_swagger_ui_html(

```jinja hl_lines="4"
{!../../docs_src/templates/templates/item.html!}
```

In this example, it would link to a CSS file at `static/styles.css` with:

```CSS hl_lines="4"
{!../../docs_src/templates/static/styles.css!}
```

│   ├── main.py
└── static
    ├── redoc.standalone.js
    ├── swagger-ui-bundle.js
    └── swagger-ui.css
```

### Serve the static files { #serve-the-static-files }

* Import `StaticFiles`.
* "Mount" a `StaticFiles()` instance in a specific path.

{* ../../docs_src/custom_docs_ui/tutorial002_py310.py hl[7,11] *}

### Test the static files { #test-the-static-files }

│   ├── __init__.py
│   ├── main.py
└── static
    ├── redoc.standalone.js
    ├── swagger-ui-bundle.js
    └── swagger-ui.css
```

### 提供靜態檔案 { #serve-the-static-files }

* 匯入 `StaticFiles`。
* 在特定路徑「掛載」一個 `StaticFiles()` 實例。

{* ../../docs_src/custom_docs_ui/tutorial002_py310.py hl[7,11] *}

### 測試靜態檔案 { #test-the-static-files }