how to use flask render_template API to return multiple images for a HTML template in the template folder?

Question

I want to read some local images(.jpg) from a local file path, then display those images on a web page(127.0.0.1:8000) by using flask and python3.I have already display single image on web page by use the following code:

from flask import Flask,render_template
 
app = Flask(__name__)
 
 
def return_img_stream(img_local_path):
    import base64
    img_stream = ''
    with open(img_local_path, 'rb') as img_f:
        img_stream = img_f.read()
        img_stream = base64.b64encode(img_stream).decode()
    return img_stream
 
 
@app.route('/')
def hello_world():
    img_path = 'D:\\1111\\1.jpg'
    img_stream = return_img_stream(img_path)

    return render_template('index.html',img_stream=img_stream)
 
 
if __name__ == '__main__':
    app.run(debug=True,host='127.0.0.1',port=8080)

How should I modify return_img_stream and hello_world function to use flask read multi images stream and send it to 'index.html' template?

if you would have images in folder static then you could send only list with filenames and use for-loop in template to generate like <img src="/static/1.jpg"> — furas
– furas, Commented Jul 11, 2021 at 2:06
you will have to use for-loop in hello_world to create list with many img_stream - and later you will need for-loop in template to display it — furas
– furas, Commented Jul 11, 2021 at 2:06

furas · Accepted Answer · 2021-07-11 11:19:26Z

1

EDIT:

If you would have images in folder static then you could send only list with filenames and use for-loop in template to generate tags like <img src="/static/1.jpg">

@app.route('/')
def hello_world():
    #filenames = os.listdir('static')
    filenames = ['1.jpg', '2.jpg'] 

    return render_template('index.html', filenames=filenames)

template

{% for name in filenames %}
  <img src="/static/{{ name }}">
{% endfor %}

If you need to use base64 then you have to use for-loop in Flask

@app.route('/')
def hello_world():
    #filenames = os.listdir('D:\\1111')
    #filenames = [os.path.join('D:\\1111', name) for name in filenames]
    filenames = ['D:\\1111\\1.jpg', 'D:\\1111\\2.jpg']

    images = []

    for img_path in filenames:
        img_stream = return_img_stream(img_path)
        images.append(img_stream)

    return render_template('index.html', images=images)

template

{% for img in images %}
  <img src="data:image/jpeg;base64, {{ img }}">
{% endfor %}

EDIT:

If you would merge all images to create single image then you would need modules like pillow or opencv to convert jpg to raw image, merge them, convert it back to single jpg.

EDIT:

If you want to add images with some text (ie. with filename) then you have to create list with pairs (image, text) and {% for img, txt in images %} and put text using {{ txt }}

@app.route('/')
def hello_world():
    #filenames = os.listdir('D:\\1111')
    #filenames = [os.path.join('D:\\1111', name) for name in filenames]
    filenames = ['D:\\1111\\1.jpg', 'D:\\1111\\2.jpg']

    images = []

    for img_path in filenames:
        img_stream = return_img_stream(img_path)
        images.append( [img_stream, img_path ])

    return render_template('index.html', images=images)

template

{% for img, txt in images %}
  filename: {{ txt }}<br/>
  <img src="data:image/jpeg;base64, {{ img }}">
{% endfor %}

But if you mean text on image then it may need pillow to edit images and put text on images.
Or you will have to learn CSS for positioning elements in HTML.

<style>
  div.image { ... }
  div.image span { ... }
</style>

{% for img, txt in images %}
  <div class="image">
     <span>filename: {{ txt }}</span>
     <img src="data:image/jpeg;base64, {{ img }}">
  <div>
{% endfor %}

edited Jul 11, 2021 at 11:19

answered Jul 11, 2021 at 2:17

furas

149k12 gold badges121 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

zgcr Over a year ago

Thank you! My images are not in static folder,because I want to use this code show different images on a web page.If I want to show some text at the top of each image on the web page,how should I modify the index.html?

furas Over a year ago

if you want to put text in HTML then create list with pairs images = [(image, text), ...] and use {% for img, text in images %} and simply put it as {{ txt }}. But if you mean text on image then may need to use module pillow to edit image - or you will have to learn CSS to positioning elements in HTML.

furas Over a year ago

I added some code with (image, text) in answer.

zgcr Over a year ago

hi,you code is very helpful! I‘m a newbie for flask and html,I want to use CSS to setting my images and text attributes,but i don't know how.I want to arrange multiple images in line-first order, and when one line is full, they will be sorted to the next line. Each image is scaled to the absolute width and height，and the original aspect ratio of the picture is not maintained. There is a text at the top of the image, and the font size can be set for the text (the text is not in the image).

furas Over a year ago

you would have to find some tutorial - like w3school. Eventually you could use some CSS Framework - like Bootstrap, UIKit - to use only classes to assign some CSS settings. ie. 14 Best CSS Frameworks for Front-End Developers

|

Collectives™ on Stack Overflow

how to use flask render_template API to return multiple images for a HTML template in the template folder?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related