Django и JS for loop: как изменить значение переменной на {%static 'path' %}?

Я пытаюсь выяснить как изменить путь на картинке имея JS логику в шаблоне Django. В качестве примера - согласно логике в скрипте JS - изменить с:

hangman_game/img/s0.jpg на hangman_game/img/s1.jpg затем к hangman_game/img/s2.jpg ит

В предыдущем фреймворке это работало. Но сейчас я перевожу страницу на фреймворк Django. Почти все готово, но синтаксис JS for loop, упомянутый ранее, не работает, и я ищу выход: как правильно задать цикл for, который будет генерировать новый путь к картинке в HTML файле.

В моем html-файле у меня есть:

<div id="gallows">
    <img src="{% static 'hangman_game/img/s0.jpg' %}" alt="" />
</div>

Эта часть в порядке. Проблема в том, что этот div связан с циклом for в js файле, где у меня ранее было:

var errorCount = 0;

if(matched == true)
    {
        
        // errorCount for changing picture:
        errorCount++;
        var picture = "img/s" + errorCount + ".jpg"
        document.getElementById("gallows").innerHTML = '<img src="'+picture+'"alt="" />';

Вне Django он работал, но после перехода на Django перестал (очевидно).

Поскольку JS var picture является строкой, я почти уверен, что могу использовать {% static %}, но не знаю как.

Я пытался обновить файл JS несколькими способами (безуспешно). Другими словами, изменяя эту часть: enter image description here на:

var picture = "{% static 'hangman_game/img/s" + errorCount + ".jpg' %}"

var picture = "{% static 'hangman_game/img/s' %}{{errorCount+ .jpg}}"

var picture = "{% static 'hangman_game/img/s' %}{{errorCount+ '.jpg'}}"

var picture = "{% static 'hangman_game/img/s' %}{{+errorCount+ '.jpg'}}"

var picture = "{% static 'hangman_game/img/s' %}+errorCount+{{'.jpg'}}"

var picture = "{% static 'hangman_game/img/s' %}+errorCount+{{.jpg}}"

Как правильно реализовать тег шаблона {% static %} в этом цикле for?

Я не совсем уверен, какой механизм стоит за решением этой проблемы, но, после осмотра, я понял, что страница не смогла найти путь в файле JS, вербализованный как типичный путь. Ожидалось, что в качестве корня будет адрес сервера: http://127.0.0.1:8000/

Итак, имея в файле HTML:

<div id="gallows">
    <img src="{% static 'hangman_game/img/s0.jpg' %}" alt="" />
</div>

Мне следовало модифицировать часть var picture = "img/s" + errorCount + ".jpg" в файле js до:

        errorCount++;
        // var picture = "{% static 'hangman_game/img/s" + errorCount + ".jpg' %}"
        
        var picture = "http://127.0.0.1:8000/static/hangman_game/img/s" + errorCount + ".jpg"
        document.getElementById("gallows").innerHTML = '<img src="'+picture+'"alt="" />';

При этом все работает.

Вернуться на верх