I want to pass data from flask back to React and render html based on it

Question

app.py

@app.route('/liveplots', methods=["POST", "GET"])
def liveplots():
    global liveclass
    return render_template('liveplotframe.html', image=liveclass.get_plot())

liveplotframe.html

<div id='hi'></div>
    <img src="{{image}}" />

So, right now this works if image is a single image encoded by base64.b64encode()

However, I can't seem to get it to work for a list or a dictionary of such images. In app.py I want to render_template('liveplotframe.html', list_of_images=liveclass.get_plots())

and then in my html insert a script that creates images for each one.

Is there an easy way of doing this? I'm using Flask.

Answer 1

You need to loop over the list_of_images in your liveplotframe.html.

<div id='hi'></div>
{% for image in list_of_images %}
   <img src="{{image}}" />
{% endfor %}