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?

Please read flask.pocoo.org/docs/1.0/quickstart/#rendering-templates carefully. First img_data is inside the string and you are not using template syntax. — strippenzieher
– strippenzieher, Commented Feb 11, 2019 at 8:07
See the comment I added to my answer on your prior question about this. — Dave W. Smith
– Dave W. Smith, Commented Feb 12, 2019 at 4:24
If you want to pass a variable to a template you need to put it between curly brackets. Do you have something like {{ img_data }} in your template? — gittert
– gittert, Commented Feb 12, 2019 at 15:39

JeremyW · Accepted Answer · 2019-05-23 01:07:03Z

8

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

This is the way we can solve this.

edited May 23, 2019 at 1:07

JeremyW

5,2626 gold badges33 silver badges32 bronze badges

answered May 23, 2019 at 1:01

maodo

791 silver badge4 bronze badges

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

1 Comment

Akhil Jain Over a year ago

This answer is underated. Worked perfectly.

Vaibhav Shukla · Accepted Answer · 2020-02-14 20:31:20Z

2

1.First Add A empty Image Tag Without A Source

2.Then With Javascript preprocess the base64 data string

3.update the Image src with updated base64 data

<img src="" id="img" alt="Chart" height="100" width="100">

<script>
    data = "{{data}}"
    data = data.replace("b&#39;", "") //to get rid of start curly brace code 
    data = data.replace("&#39;", "")  //to get rid of end curly bracecode 

    document.getElementById("img").src = "data:image/png;base64,"+data; // set src
</script>

edited Feb 14, 2020 at 20:31

answered Feb 14, 2020 at 20:17

Vaibhav Shukla

212 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related