How to pass Base64 image string from Flask Python code to HTML?

Question

I have a Flask server and I want to render a base64 image in HTML page.

Flask Code:

new_image_string = base64.b64encode(buff.getvalue()).decode("utf-8")
return render_template('perspective_result.html', img_data=new_image_string)

HTML CODE:

<img src="data:image/jpeg;base64,+img_data" alt="img_data"  id="imgslot"/>

I am getting the below error from browser console:

GET data:image/jpeg;base64,+img_data 0 ()

Where did I go wrong?

Answer 1

<img src="data:image/jpeg;base64,{{ img_data }}" alt="img_data" id="imgslot"/>

This is the way we can solve this.