Django не может загрузить файл svg во внешний js-файл с помощью статической ссылки
Мне нужно загрузить файл svg из моего кода javascript, который я включаю в свой index.html. Я понимаю, что шаблон jinja не может быть использован внутри внешнего файла js. Поэтому в качестве обходного пути я сохраняю то же самое в переменных whiteLogo и logo, которые я использую в js-коде.
Но когда я запускаю сервер и прокручиваю страницу, я получаю ошибку, что ресурс не может быть найден.
Not Found: /[object HTMLImageElement]
[04/May/2022 12:18:05] "GET /[object%20HTMLImageElement] HTTP/1.1" 404 2441
Где я ошибаюсь, правильно ли я загружаю путь к логотипу?
index.html
<script type="text/javascript">
var whiteLogo = "{% static "app/images/logo/white-logo.svg" %}";
var logo = "{% static "app/images/logo/logo.svg" %}";
</script>
<script src="{% static 'app/js/main.js' %}">></script>
main.js
window.onscroll = function () {
var header_navbar = document.querySelector(".navbar-area");
var sticky = header_navbar.offsetTop;
var logo = document.querySelector('.navbar-brand img')
if (window.pageYOffset > sticky) {
header_navbar.classList.add("sticky");
logo.src = logo;
} else {
header_navbar.classList.remove("sticky");
logo.src = whiteLogo;
}
// show or hide the back-top-top button
var backToTo = document.querySelector(".scroll-top");
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
backToTo.style.display = "flex";
} else {
backToTo.style.display = "none";
}
};
EDIT :
Попробовал это
js
if (window.pageYOffset > sticky) {
header_navbar.classList.add("sticky");
logo.src = logoFromIndex;
} else {
header_navbar.classList.remove("sticky");
logo.src = whiteLogoFromIndex;
}
index.html
<script type="text/javascript">
var whiteLogoFromIndex = {% static 'app/images/logo/white-logo.svg' %};
var logoFromIndex = {% static 'app/images/logo/logo.svg' %};
</script>
Мы использовали переменную logo, которую мы создали в нашем index.html, для присвоения переменной logo
, созданной в файле javascript main.js
var logo = document.querySelector('.navbar-brand img')
Это была глупая ошибка с моей стороны.
index.html
<script type="text/javascript">
var whiteLogoFromIndex = "{% static "app/images/logo/white-logo.svg" %}";
var logoFromIndex = "{% static "app/images/logo/logo.svg" %}";
</script>
<script src="{% static 'app/js/bootstrap.min.js' %}"></script>
main.js
window.onscroll = function () {
var header_navbar = document.querySelector(".navbar-area");
var sticky = header_navbar.offsetTop;
var logo = document.querySelector('.navbar-brand img')
if (window.pageYOffset > sticky) {
header_navbar.classList.add("sticky");
logo.src = logoFromIndex;
} else {
header_navbar.classList.remove("sticky");
logo.src = whiteLogoFromIndex;
}
// show or hide the back-top-top button
var backToTo = document.querySelector(".scroll-top");
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
backToTo.style.display = "flex";
} else {
backToTo.style.display = "none";
}
};