如何使用jinja python从数据库加载base64图像数据到html图像标签中

Question

如何使用 Jinja 从数据库接收的图像填充我的卡片视图？我已经编写了 SQL 语句来从称为候选人的数据库表中获取数据。其中一列保存采用 Base64 格式的 Blob 数据。我正在尝试将候选图像显示在 HTML 模板上。不幸的是，使用下面的代码，图像没有显示。 下面是我保存到数据库的Python代码

def convertToBinaryData(filename):
    # Convert digital data to binary format
    with open(filename, 'rb') as file:

        # rb means open the file in binary mode (read/write using byte data)
        binaryData = file.read()
        # encode the file to get base64 string
        file = base64.b64encode(binaryData)
    return file
@app.route("/express-interest", methods=["POST", "GET"])
def express_interest():
    if request.method == "POST":
        surname = request.form["surname"]
        other_name = request.form["other_name"]
        political_party = request.form["political_party"]
        posittion = request.form["position"]
        government_office = request.form["government_office"]
        email_contact = request.form["email_contact"]
        manifesto = request.form["manifesto"]
        passport_upload = request.files["passport_upload"]
        #working on the image
        filename = secure_filename(passport_upload.filename)
        passport_upload.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
        img = os.path.join(app.config['UPLOAD_FOLDER'],filename)

        imagebinarydata = convertToBinaryData(img)
        # encode the file  to get base64 string
        file = base64.b64encode(imagebinarydata)
        # print(imagebinarydata)
        insert_query = "INSERT INTO `candidates`(`username`, `other_name`, `political_party`, `government_office`, `position`, `email_contact`, `manifesto`, `passport`) VALUES (%s,%s,%s,%s,%s,%s,%s,%s)"
        with connection:
            cursor.execute(insert_query,(surname,other_name,political_party,government_office,posittion,email_contact,manifesto,file))
            connection.commit()
        return render_template("express_interest.html")
    else:
        return render_template("express_interest.html")

下面是获取数据的Python代码

@app.route("/candidates")
def candidates():
    select_query = "SELECT * FROM candidates"
    cursor.execute(select_query)
    rows = cursor.fetchall()

    return render_template("candidates.html", rows = rows)

下面是HTML代码

  {% extends 'index.html'%}
    {% block content %}
    <h2 class="text-center">{% block title %} candidates {% endblock %}</h2>
    <div class="row">
        {% for row in rows %}
        <div class="col-3">
            <div class="card" style="width: 18rem;">
                <img src="data:image/jpeg;base64,{{row[8]}}" class="card-img-top" alt="candidate image">
                <div class="card-body">
                    <h4 class="card-title"></h4>
                    <p class="card-text">{{row[2]}}</p>
                    <a href="#" class="btn btn-primary">Vote</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endblock %}

Answer 1

您的方法基本上是正确的，但是您的代码中存在一些问题，可能会阻止图像正确显示。

1. Flask 中的 Base64 编码：当您将图像保存到数据库时， 您正在将其编码为 Base64。当您从以下位置获取图像数据时 数据库并将其传递给模板，它已经 Base64 编码。因此，您不应该再次对其进行编码

   base64.b64encode

   。您应该按原样传递二进制数据。
2. 图像格式：确保数据库中存储的图像格式为 HTML 的

   <img>

   标签支持的格式（例如 JPEG、PNG）。你 正在使用

   "data:image/jpeg;base64,{{row[8]}}"

   ，这表明 您的图像是 JPEG 格式。确保这与实际相符 存储在数据库中的图像的格式。

获取数据的Python代码：

@app.route("/candidates")
def candidates():
    select_query = "SELECT * FROM candidates"
    cursor.execute(select_query)
    rows = cursor.fetchall()

    return render_template("candidates.html", rows=rows)

HTML 模板：

{% extends 'index.html' %}
{% block content %}
<h2 class="text-center">{% block title %} candidates {% endblock %}</h2>
<div class="row">
    {% for row in rows %}
    <div class="col-3">
        <div class="card" style="width: 18rem;">
            <img src="data:image/jpeg;base64,{{ row[8].decode('utf-8') }}" class="card-img-top" alt="candidate image">
            <div class="card-body">
                <h4 class="card-title">{{ row[1] }}</h4>
                <p class="card-text">{{ row[2] }}</p>
                <a href="#" class="btn btn-primary">Vote</a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}

• 删除了

  base64.b64encode

  上不必要的

  file

  。
• 添加了

  .decode('utf-8')

  以解码

  src

  属性中的 Base64 数据

  <img>

  标签。

通过这些更改，图像应该根据数据库中存储的 Base64 数据正确显示在卡片视图中。确保图像格式 (JPEG) 与您存储在数据库中的图像的格式匹配。