DEV Community

loading...

Serving Static Files in FastAPI

fastapitutorial profile image FastapiTutorial-com ・3 min read

Alt Text

Ok, the navbar was good, but something is missing,our brand logo, no? In this post, we will be adding an image/logo to our navbar. Before that lets understand static and media files in a hurry. When we fill a form, say a form that asks for an image upload from a computer. Then the image uploaded by us is called a media.
But when a webpage shows us an image or provides CSS, js file to the browser, it's a static file. Ok, now lets add a our logo to navbar. For serving static files, we will make use of a library named aiofiles. Lets add this to our requirements.txt file.

fastapi
uvicorn


#for template
jinja2


#for static files
aiofiles
Enter fullscreen mode Exit fullscreen mode

Now, install aiofiles with pip install -r requirements.txt. Now, since this static files configuration is not specific for a particular route, I am going to modify our main.py file to support static files.

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()
Enter fullscreen mode Exit fullscreen mode

Basically, we are informing fastapi that we are going to keep all our static files in a folder named 'static' and whenever it has to search for a static file, say an image, don't search here and there. It will be inside static folder only.

Ok, this part is complete, now lets put an image in the path 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
Enter fullscreen mode Exit fullscreen mode

To include a static file in template we make use of url_for template tag. e.g.

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

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

Ok, now let's modify our navbar.html file to have a brand image.

<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>
Enter fullscreen mode Exit fullscreen mode

Now, you should have a logo in the navbar. e.g. the image named 'JB' in this case in the bottom left.
Alt Text
Final git commit : https://github.com/nofoobar/JobBoard-Fastapi/commit/119ccd1d2b1d29c493389c9a67a64471116c80ab.

Discussion (0)

pic
Editor guide