如何将 Base64 图像字符串从 Flask Python 代码传递到 HTML？

Question

我有一个 Flask 服务器，我想在 HTML 页面中呈现一个 base64 图像。

烧瓶代码：

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

HTML代码：

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

我从浏览器控制台收到以下错误：

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

我哪里做错了？

Answer 1

1.首先添加一个没有来源的空图片标签

2.然后用Javascript预处理base64数据字符串

3.使用更新的 base64 数据更新 Image src

<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>

Answer 2

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

这是我们可以解决这个问题的方法。