Я новичок в программировании, и я хотел сделать динамические c карты на основе файла .json
.
HTML:
[...]
<form action="#" method="post" class="mx-5 px-5">
{% for figure in figures %}
<div class="card mx-4 my-2" style='background-color: #e9ecef; display: inline-block;' style="width: 25rem;">
<image src={{figure['img_src']}} class="card-img-top" alt="Figure Illustration">
<div class="card-body">
<h5 class="card-title">{{figure['name']}}</h5>
<p class="card-text"></p>
<a href="#" class="btn btn-primary">Calculate</a>
</div>
</div>
{% endfor %}
</form>
[...]
JSON:
[
{
"name": "Rectangle",
"img_src":"{{url_for('static', filename='img/areas/rectangle.png')}}"
},
{
"name": "Triangle",
"img_src":"{{url_for('static', filename='img/areas/triangle.png')}}"
},
{
"name": "Circle",
"img_src":"{{url_for('static', filename='img/areas/circle.png')}}"
},
{
"name": "Trapezoid",
"img_src":"{{url_for('static', filename='img/areas/trapezoid.png')}}"
},
{
"name": "Parallelogram",
"img_src":"{{url_for('static', filename='img/areas/parallelogram.png')}}"
}
]
Python 3.8:
[...]
''' FIGURE AREAS '''
@app.route('/areas/', methods=['GET','POST'])
def figureAreas():
with open('static/js/areas.json') as f:
figures = load(f)
if request.method == 'POST':
pass # handle buttons, redirect
return render_template('areas.html', y=datetime.now().year, figures=figures)
[...]
Что я вижу: Карта без изображения - показан альтернативный текст
Проблема в том, что я бы хотел, чтобы атрибут src
брал его значение из словаря figures
, в частности, ключа "img_src"
, но я не знаю, как это сделать. Моя попытка не работает, и я не нашел никакой информации об этой проблеме.
Я уже дважды проверил путь и имена файлов, но я не вижу изображения, поэтому проблема должна быть в код.
Заранее спасибо.