Images appear fine when I preview HTML page directly, but appear broken when same page is returned from flask

working on a small project, for which I have an HTML page. For now it is a static page, with everything hard-coded.

When I preview it locally, it appears fine. But when the same page is returned from flask using render_template, the image link appears broken.

Following is the structure of directory:

/
-server.py
--templates/
---org_dashboard.html
---img_avatar.png

Im attaching screenshots as well as code snippets from return function, and the corresponding HTML code.

Python/flask code:

@app.route('/org_dashboard', methods=['GET', 'POST'])
def org_dashboard():
    return render_template('org_dashboard.html')

Corresponding HTML code with image path:

<div class="card-columns">
<div class="card">
      <img src="img_avatar.png" alt="Avatar" style="width:100%">
      <div class="container">
        <h4><b>John Doe</b></h4>
        <p>Architect & Engineer</p>
      </div>
    </div>
</div>

When returned from localhost by flask. Notice the link appears broken: Click here to view image

When viewed directly by opening the HTML file. Image appears fine Click here to view screenshot