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 несколькими способами (безуспешно). Другими словами, изменяя эту часть:
на:
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="" />';
При этом все работает.