Как изменить HTML атрибуты, используя Flask? - PullRequest
0 голосов
/ 17 апреля 2020

Я новичок в программировании, и я хотел сделать динамические 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", но я не знаю, как это сделать. Моя попытка не работает, и я не нашел никакой информации об этой проблеме.

Я уже дважды проверил путь и имена файлов, но я не вижу изображения, поэтому проблема должна быть в код.

Заранее спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...