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