如何在jinja html模板中发送图片？

Question

我正在使用 Flask + Jinja 的组合，并且尝试在 Jinja 渲染的 HTML 文件中显示图像。

在 Python 中，我将其转换为 base64 格式，然后发送到模板中。然后，我使用图像标签来显示该图像。

<img src="data:image/jpeg;base64,{{ myimage }}">

我确认Python编码是正确的，当我简单地写一个包含base64的html文件时，它显示得很好。但似乎出现问题的地方是模板对输出进行了一些修改。特别是：

<img src=3D"data:;base64,/9j/4QAYR
...
baW4WqWj/2Q=3D=3D"/>

Jinja似乎在一些地方添加了“3D”文本，看起来不应该这样。我没有指定任何不同的东西，当我将myimage打印为纯文本时，它按照我预期的方式显示，以/9j开头，以/2Q==结尾。

我不确定我在Jijna中解释的方式是否有问题，但它就是无法加载。我在电子邮件源中看到图像src标记，但在我期望加载图像的位置上什么也没有。

- Michael Yousef

Answer 1

将变量myimage标记为安全：

<img src="data:image/jpeg;base64,{{ myimage | safe }}">

简单的单文件应用程序（使用requests库）：

from flask import Flask, render_template_string
import base64
import requests

app = Flask(__name__)

global _base64_encoded_image


@app.route('/')
def index():
    _html_template = '''
        <p><img src="data:image/jpeg;base64,{{ myimage | safe }}"><p>
        <p><img src="data:image/jpeg;base64,{{ myimage | e }}"><p>    
        <p><img src="data:image/jpeg;base64,{{ myimage }}"><p>
    '''
    global _base64_encoded_image
    return render_template_string(_html_template, myimage=_base64_encoded_image)


@app.before_first_request
def before_first_request():
    global _base64_encoded_image
    _url = "http://via.placeholder.com/200?text=Flask/Jinja2"
    _r = requests.get(_url)
    _base64_encoded_image = base64.b64encode(_r.content)
    print _base64_encoded_image


if __name__ == '__main__':
    app.run()

- pjcunningham

---

不幸的是，那并没有起作用。它仍然以引用可打印格式作为内容传输编码出现，并且仍然通过不应该存在的“3D”来搞乱编码。 - Michael Yousef

在模板中，您需要解码字节对象 <img src="data:image/jpeg;base64,{{ myimage.decode('utf-8') | safe }}">。 - Vladimir Osinskiy

Answer 2

这看起来像是一个URL编码问题，因为=是base64字母表中使用的字符，它的URL编码是%3D。在使用Jinja渲染之前，尝试对base64数据进行urllib.quote处理。

- jackarms

---

我尝试在将变量传递给Jinja之前使用urllib.parse.quote，但结果并没有改变。 - Michael Yousef

你能发布一下你试图呈现的base64数据以及在呈现的HTML中显示出来的内容吗？我正在测试一个带有尾随==的数据示例，并且没有问题呈现它。 - jackarms

很遗憾，我目前无法发布那些数据。我只能确认当我通过base64解码器抛出它，或将该HTML写入纯文本.html文件中时，它可以正确呈现。 - Michael Yousef