FastAPI에서 정적 파일 제공

알겠습니다. 내비게이션은 좋았지만 뭔가 빠졌습니다. 우리 브랜드 로고가 아닌가요? 이 게시물에서는 navbar에 이미지/로고를 추가할 것입니다. 그 전에 서둘러 정적 및 미디어 파일을 이해합시다. 양식을 작성할 때 컴퓨터에서 이미지 업로드를 요청하는 양식을 말합니다. 그러면 우리가 업로드한 이미지를 미디어라고 합니다.
그러나 웹 페이지가 우리에게 이미지를 보여주거나 CSS, js 파일을 브라우저에 제공할 때 그것은 정적 파일입니다. 자, 이제 navbar에 로고를 추가하겠습니다. 정적 파일을 제공하기 위해 aiofiles라는 라이브러리를 사용합니다. 이것을 requirements.txt 파일에 추가합시다.

fastapi
uvicorn


#for template
jinja2


#for static files
aiofiles

이제 pip install -r requirements.txt를 사용하여 aiofile을 설치합니다. 이제 이 정적 파일 구성은 특정 경로에 한정되지 않으므로 정적 파일을 지원하도록 main.py 파일을 수정하겠습니다.

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles #new
from core.config import settings
from apis.general_pages.route_homepage import general_pages_router


def include_router(app):
    app.include_router(general_pages_router)


def configure_static(app):  #new
    app.mount("/static", StaticFiles(directory="static"), name="static")


def start_application():
    app = FastAPI(title=settings.PROJECT_NAME,version=settings.PROJECT_VERSION)
    include_router(app)
    configure_static(app) #new
    return app

app = start_application()

기본적으로 우리는 모든 정적 파일을 '정적'이라는 폴더에 보관하고 정적 파일, 예를 들어 이미지를 검색해야 할 때마다 여기 저기 검색하지 않도록 fastapi에 알리고 있습니다. 정적 폴더 안에만 있습니다.

자, 이 부분이 완료되었습니다. 이제 static > images > logo.png 경로에 이미지를 넣겠습니다.

backend/
├─apis/
│ └─general_pages/
│   └─route_homepage.py
├─core/
│ └─config.py
├─main.py
├─requirements.txt
├─static/         #new
│ └─images/       #new
│   └─logo.png    #new
└─templates/
  ├─components/
  │ └─navbar.html
  ├─general_pages/
  │ └─homepage.html
  └─shared/
    └─base.html

템플릿에 정적 파일을 포함하기 위해 url_for 템플릿 태그를 사용합니다. 예를 들어

<img src="{{ url_for('static', path='images/jb.png') }}" alt="" width="30" height="24"> 

 <link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet"> 

이제 브랜드 이미지를 갖도록 navbar.html 파일을 수정하겠습니다.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="{{ url_for('static', path='images/logo.png') }}" alt="" width="30" height="24">
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

이제 navbar에 로고가 있어야 합니다. 예를 들어 이 경우 왼쪽 하단에 'JB'라는 이미지가 있습니다.

최종 자식 커밋: .