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

【问题标题】：How to pass Base64 image string from Flask Python code to HTML?如何将 Base64 图像字符串从 Flask Python 代码传递到 HTML？
【发布时间】：2019-02-11 07:43:56
【问题描述】：

我有一个 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 ()

我哪里做错了？

【问题讨论】：

请仔细阅读flask.pocoo.org/docs/1.0/quickstart/#rendering-templates。第一个 img_data 在字符串中，您没有使用模板语法。
查看我添加到关于您之前关于此问题的答案的评论。
如果要将变量传递给模板，则需要将其放在大括号之间。您的模板中有类似 {{ img_data }} 的内容吗？

标签： python html flask base64

【解决方案1】：

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

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

【讨论】：

这个答案被低估了。完美运行。

【解决方案2】：

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>

【讨论】：