How to display all the images in a directory using flask and HTML?

Question

I have a folder with a list of jpg images. I have to display them using flask and HTML. I have the below code but I don't know where is the problem.

My app.py :

@app.route('/detection')
def detection():
    username = 'cars2'
    basepath = f"static/{username}/Images"
    dir = os.walk(basepath)
    file_list = []

    for path, subdirs, files in dir:
        for file in files:
            temp = joinPath(path + '/', file)
            file_list.append(temp)
    return render_template('detection.html', hists=file_list)

detection.html

{% extends 'base.html' %}

{% block head%}
<title>IPOD</title>
{% endblock %}

{% block body %}
<h1 align="center">IPOD</h1>
<!--<p>All images scraped from instagram.com/{{user_name}}</p>-->
    {% for hist in hists %}
        <img src="{{url_for('static', filename=hist)}}" alt="{{hist}}">
    {% endfor %}
{% endblock %}

Answer 1

there was a silly mistake.

<img src="{{hist}}" alt="{{hist}}">

Changed the source to the variable name and it worked

Answer 2

use basepath as basepath = f"../static/{username}/Images"