My image that is in my html file is not showing!

How the image shows up:


Project structure:

Here’s my code:
title.html:

<!DOCTYPE html> 
<html>
    <head>
        <link rel="stylesheet" href="../assets/css/style.css">
        <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    </head>
    <body>
        <div class="div" id="content">
            <h1 class="color">Hello I'm Dev Dhawan</h1>
            <hr>
            <br>
            <img src="./app/static/headshot.png" alt="Hello" class="headshot">
            <p>Hello</p>
        </div>
    </body>
</html>

about_me.py:

import streamlit as sl
import header

header.all()

titleHtml = open("./html/title.html", 'r', encoding='utf-8')
sc = titleHtml.read()
sl.markdown(sc, unsafe_allow_html=True)

Hi @Dev_Dhawan and welcome to our community – we’re excited to have you join us! :hugs:

Could it be a mismatch between the path you’ve specified for your image in the title.html file?

Charly