How to display all images in a directory with flask

Question

I am trying to display all images from a particular directory in static (static/plots). Here is my python:

hists = os.listdir('static/plots')
hists = ['plots/' + file for file in hists]
return render_template('report.html', hists = hists)

and my html:

<!DOCTYPE=html>
<html>
<head>
    <title>
        Store Report
    </title>
</head>
<body>
    {{first_event}} to {{second_event}}
    {% for hist in hists %}
    <img src="{{url_for('static', filename='{{hist}}')}}" alt="{{hist}}">
    {% endfor %}
</body>
</html>`

And when the template successfully renders, the templates are not fetched. Opening the image in a new tab yields: http://127.0.0.1:8080/static/%7B%7Bhist%7D%7D

I imagine the problem is with this line, but I can't figure out what's correct:

<img src="{{url_for('static', filename='{{hist}}')}}" alt="{{hist}}">

score 5 · Accepted Answer · answered Dec 18 '17 at 23:11

5

Try changing the line to this:

<img src="{{url_for('static', filename=hist)}}" alt="{{hist}}">

You had an extra set of {{ }} in there which was rendering as %7B and %7D.

answered Dec 18 '17 at 23:11

Matt Healy

18,033
4
56
56

So basically anytime you're inside {{ }} flask knows what everything it knows about means? Let me know if my wording here was confusing – ChootsMagoots Dec 19 '17 at 00:07
Yes, since you were already in {{ }} Flask can interpret the variable `hist`. – Matt Healy Dec 19 '17 at 00:12

score 3 · Answer 2 · answered Dec 18 '17 at 23:09

3

I acheived success with this line:

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

I may have had an extra 'plots/' in here when I tried it before.

answered Dec 18 '17 at 23:09

ChootsMagoots

670
1
6
19

How to display all images in a directory with flask

2 Answers2

Linked