# Displaying Images On The Frontend Using FastAPI
In this tutorial, we'll look at how to use FastAPI to display static and dynamic images on the frontend.
Displaying images on the frontend can be a time-consuming operation; it takes a significant amount of time and effort to create logic to show static and dynamic images. FastAPI includes certain classes and modules that can help you save time and effort when displaying images.
# Displaying static images
If you've dealt with the Python Flask or Django web frameworks, you'll know that in order to serve static files, we need to include them in the static folder established within the project's root directory.
The procedure is the same, however, the logic for displaying static images in FastAPI differs.
The following code will help us to display the ***static images*** on the frontend.
```python
# static_img.py
from fastapi import FastAPI
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
app = FastAPI()
app.mount("/imgs", StaticFiles(directory="imgs"), name='images')
@app.get("/", response_class=HTMLResponse)
def serve():
return """
Hello World
"""
```
To serve static images or files, we utilised FastAPI's `StaticFiles` class. This class is derived directly from Starlette; we can simply import that class from `fastapi.staticfiles` instead of `starlette.staticfiles` for convenience.
We stored our static image inside the `imgs` directory present in the root directory and we passed this directory to the `StaticFiles()` instance and **mounted** it in the `/imgs` path.
> **Mounting** here means setting up or adding a completely independent application in a specific path, which will then take care of handling all the sub-paths.
Here,
`/img` - is a sub-path on which the sub-application will be mounted.
`directory='img'` - refers to the static directory where our static images or files will be stored.
`name='images'` - this name will be used by FastAPI internally or we can skip this also.
The path operation decorator `@app.get("/", response class=HTMLResponse)` was then created, and you'll notice that we passed `HTMLResponse`, which will assist in returning the HTML response directly from FastAPI.
The `response_class` will also be used to define the `media type` of the response and in this case, in the HTTP header, `Content-Type` will be set to `text/html`.
Then we created a **path operation function** called `serve()` and returned the HTML in which we passed our static image path(`"imgs/g.png"`) in the `src` attribute of the `` tag.
Now run the server using the uvicorn.
```python
uvicorn static_img:app --reload
```
Here's the API response
![API response](https://cdn.hashnode.com/res/hashnode/image/upload/v1677844505908/34694974-c95a-40ac-b757-b6d61975f42c.png align="center")
If we see the API response in the Postman, then we'll see a raw HTML as a response by the FastAPI.
![API response in the Postman](https://cdn.hashnode.com/res/hashnode/image/upload/v1677847682522/4593c14d-55ab-4f47-b82a-a5ad997eeb3d.png align="center")
Due to `HTMLResponse` in the path operation decorator, the browser parses our HTML like it usually does for any HTML file.
# Another approach
This approach might be beneficial if you are working on a serious project and want your code to be more readable and manageable.
In this approach, we'll be using **jinja** and instead of using `HTMLResponse` we'll be using `Jinja2Templates` to render the HTML response.
> In order to use the `Jinja2Templates`, we need to install the `jinja2` library and it can be installed using the pip by running the command `pip install jinja2`.
```python
# files.py
from fastapi import FastAPI, Request
# The modules are directly coming from starlette
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
app = FastAPI()
app.mount(
"/static", StaticFiles(directory="static"), name="static")
templates = Jinja2Templates(directory="templates")
@app.get("/")
def static(request: Request):
return templates.TemplateResponse("index.html", {"request": request})
```
The process is pretty much similar to the first approach but in this approach, we imported some more classes such as `Request` and `Jinja2Templates` from the `fastapi` and `fastapi.templating` modules, respectively.
Like in the first approach, we mounted the `StaticFiles(directory="static")` instance in a path `/static`.
Then using the `Jinja2Templates(directory="templates")`, we specified the directory called `templates` from where the FastAPI will look for the `.html` files and stored them inside the `templates` variable.
Then we created the path operation decorator `@app.get("/")` and followed by it created the path operation function called `static` and passed the `Request` class to the parameter `request`.
Then we returned the `TemplateResponse("index.html", {"request": request})`. In this case, we passed the `request` as part of the key-value pairs in the **Jinja2 context**. This will allow us to inject the dynamic content that we desire when the template is rendered.
Now write HTML code in the `index.html` file inside the **templates** directory.
```xml
Serving Image Files Using FastAPI
```
Just add the code `` to link the directory named **static** as shown in the above code.
Then in the `src` attribute of the `` tag, we specified the path to the static image using jinja like this `{{ url_for('static', path='assets/GP.png') }}`.
![Folder structure of static directory](https://cdn.hashnode.com/res/hashnode/image/upload/v1677856748961/a658bc7a-ac0d-4cd0-ac9b-709785691ef5.png align="center")
Now run the server using the command `uvicorn files:app --reload`.
Here's the response
![API response using templates](https://cdn.hashnode.com/res/hashnode/image/upload/v1677856177149/6ac06897-33fb-4500-aa91-7d424bccedd6.png align="center")
If we see what we get when we send the request to the API using Postman.
![API response in Postman](https://cdn.hashnode.com/res/hashnode/image/upload/v1677857007054/3249b7c7-fa77-4afb-818c-df59de22e603.png align="center")
We can include the same HTML as above in our `index.html` and get the same result but it won't be a good practice at all.
# Serving user-provided images
In this approach, we'll have a form where the user can enter an image that will be displayed on the frontend.
When a user uploads an image file, it is sent as **form data**, and we must install the following library to receive it.
```powershell
pip install python-multipart
```
The following code will be responsible for uploading and displaying the user-provided image.
```python
# dynamic.py
from fastapi import FastAPI, UploadFile, File, Request
from fastapi.templating import Jinja2Templates
import base64
app = FastAPI()
templates = Jinja2Templates(directory="templates")
@app.get("/")
def dynamic_file(request: Request):
return templates.TemplateResponse("dynamic.html", {"request": request})
@app.post("/dynamic")
def dynamic(request: Request, file: UploadFile = File()):
data = file.file.read()
file.file.close()
# encoding the image
encoded_image = base64.b64encode(data).decode("utf-8")
return templates.TemplateResponse(
"dynamic.html", {"request": request, "img": encoded_image})
```
The class `UploadFile` and function `File` from fastapi were imported into the code above to assist in handling the reading and uploading of the image file. We imported the `base64` library to handle image encoding and decoding.
We created a path operation decorator (`@app.get("/")`) and right below it created a path operation function called `dynamic_files` that will render the `dynamic.html` file on the path `"/"`.
Then we created a path operation decorator(`@app.post("/dynamic")`) to handle the **Post** request and then we created a path operation function called `dynamic` and passed `request: Request` and `file: UploadFile = File()`. Then we read the image file and stored it inside the `data` variable and finally closed the file.
Here, `file.file.read()` is equivalent to `UploadFile.file.read()`. `UploadFile` has a `file` attribute which is a file-like object and `read()` is a method also provided by `UploadFile` to read the bytes/characters of the image.
> If we would have defined the **asynchronous path operation function**, then we could read the file using `await file.read()`.
Now we've read the bytes of the image file and it needs to be encoded in a string that can be returned and passed to the template. If we look at the image's bytes, it would look like the following.
```powershell
xbd\x02\xacf\xb6\xaa\x02\x889\x95\xac6Q\x80\xa4<1\xcd\xef\xf7R\xc2\xb2Rendering Dynamic Images Using FastAPI
{% if img %}
{% else %}
 }})
```
Just add the code `` to link the directory named **static** as shown in the above code.
Then in the `src` attribute of the `