如何將 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"/>

這是我們可以解決這個問題的方法。