使用 Flask/Python 从 HTML 中的 sqlite 服务器渲染 Blob

Question

This piece of code renders an html template with values from my db

        displayrows = db.execute("SELECT * FROM profiles WHERE profile_id = :profile_id", (session["user_id"],))
        displayrows = db.fetchall()
        displaycount = db.execute("SELECT COUNT(*) FROM bucketlist WHERE wish_id = :wish_id", (session["user_id"],))
        for i in displayrows:
            bytes_io = BytesIO(i[5])
        for i in displaycount:
            return render_template("profile.html", rows = displayrows, count = i[0], image = bytes_io)

This is part of the html page which renders the values...

<div class="card bg-dark" style="width: 18rem;">
    <p class="list-group-item">BucketList Size - {{ count }}</p>
    {%for row in rows%}
        <ul class="list-group list-group-flush">  
            <li class="list-group-item">Location - {{ row[1] }}, {{row[2]}}</li>
            <li class="list-group-item">Looking for - {{row[3] }}</li>
            <li class="list-group-item">Bio - {{row[4]}}</li>
        </ul>  
    {%endfor%}
         <img src="{{image}}" />
</div>

I'm very new to python, flask, and coding in general so I would appreciate it if anybody takes time to explain how I can successfully display data from the blob column on an html page. Thanks in advance

Answer 1

A couple of observations:

• You can't have a return statement within a for loop. The view function can only return once.
• You need one route to render the profile page, and another to return the image.

I think I'm making some assumptions on what you're trying to do here, but hopefully this makes sense...

---

Have one route that renders the profile page:

@app.route('/profile')
def profile():

    # You could pull several profiles here, but as you provide an id it just pulls one:
    db.execute("SELECT * FROM profiles WHERE profile_id = ?", (session["user_id"],))

    # Again, this supports multiple had the query been `SELECT * FROM profiles`
    displayrows = db.fetchall()
    
    return render_template("profile.html", rows = displayrows)

Then in the template profile.html , within the for loop use flask's url_for function to generate a link to the image, passing row[0] (which should be that profile's id) as the ident argument:

{% for row in rows %}
        ...
        <img src='{{ url_for("profile_image", ident = row[0]) }}' />
        ...
{% endfor %}

That url_for function will output the correct hyperlink for the next route. Notice how this accepts the ident which is the profile id. You'll need to replace your_blob_col with the column title which holds the bolb:

from flask import send_file

@app.route('/i/<int:ident>')
def profile_image(ident):
    db.execute("SELECT your_blob_col FROM profiles WHERE profile_id = ?", (ident,))
    result = db.fetchone() # There's only one
    image_bytes = result[0] # The first and only column

    bytes_io = BytesIO(image_bytes)

    return send_file(bytes_io, mimetype='image/jpeg')  

So the hyperlink in the <img> tag would render as something like /i/123 which when handled by the profile_image function will return the image data.

You can inspect these requests in your browser's dev tools (Network tab) for a better understanding of what's going on. If your profile function had instead pulled n profiles, you'd be looking at 1 request for the profile route, and n requests to the profile_image route.

Let me know if any of this isn't clear:)