'How can I display PIL image to html with render_template flask?

I tried to display my edited image with PIL package, when I tried to make it to display on the html <img src=''></img> it doesn't appear anything, but I see the file name on inspect elements was <img src="<_io.BytesIO object at 0x000001EDA8F76E00>">. How do I make the edited image display properly?

app.py

@app.route("/api/games/shipper/image/", methods=["GET"])
def games_shipper():
    ... # My stuff up here
    image_io = BytesIO()
    img.save(image_io, "PNG")
    image_io.seek(0)
    return render_template('image.html', image_data=image_io)

image.html

   ... // My stuff up here
   <body>
      <center>
         <image src="{{ image_data }}"></image>
      </center>
   </body>
htmlpython-3.xflask


Solution 1:[1]

You'll need to encode your image in Base64 to display it in the img tag directly, see e.g. How to display Base64 images in HTML

The traditional way to display images in Flask templates is to save the image in Flask's static folder and link to it in your template like so

<body>
      <center>
         <image src="/static/{{image_name}}.png"></image>
      </center>
   </body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Simeon Nedkov

Related Questions