0

This is my code so far

Here I am getting the image from the database

Python:

@app.route('/')
def all_stalls():  # put application's code here
    stalls = Stall.query.all()
    for stall in stalls:
        stall.img = base64.b64encode(stall.data).decode("utf-8")
    return render_template('index.html', stalls=stalls)

HTML:

{% extends 'layout.html' %}
{% block content %}
    <main>
        <div class="main__darkener">
            <div class="container">
                <h1>Canteen Food Stalls</h1>
                <div class="food-stalls">
                    {% for stall in stalls %}
                        <div class="food-stalls__item" style="background-image: {{ stall.img }}">
                            <div class="food-stalls__item__darkener">
                                <h2>{{ stall.name }}</h2>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </main>

{% endblock %}

Unfortunately the image does not show up, I guess it's because it is just an array of pixels and not the file itself.

However if I just try to display the image in the html it works just fine

HTML 2:

{% for stall in stalls %}
    <h1>Stall {{ stall.stall_id }}</h1>
    <h2>{{ stall.name }}</h2>
    <img src="data:;base64,{{ stall.img }}">
{% endfor %}

Is it even possible to set this image as a background, as I did some googling and found nothing

0 Answers0