Necesito cargar un archivo svg desde mi código javascript que incluyo en mi index.html. Entiendo que la plantilla jinja no se puede usar dentro de un archivo externo js. Entonces, como solución alternativa, estoy almacenando lo mismo en mi whiteLogo y la variable de logotipo que estoy usando en el código js.

Pero cuando estoy ejecutando el servidor y al desplazarme por la página, recibo un error que indica que no se puede encontrar el recurso.

 Not Found: /[object HTMLImageElement] [04/May/2022 12:18:05] "GET /[object%20HTMLImageElement] HTTP/1.1" 404 2441

¿Dónde me estoy equivocando? ¿Estoy cargando la ruta del logotipo correctamente?

índice.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>

principal.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"; } };

EDITAR :

Intenté esto

js

 if (window.pageYOffset > sticky) { header_navbar.classList.add("sticky"); logo.src = logoFromIndex; } else { header_navbar.classList.remove("sticky"); logo.src = whiteLogoFromIndex; }

índice.html

 <script type="text/javascript"> var whiteLogoFromIndex = {% static 'app/images/logo/white-logo.svg' %}; var logoFromIndex = {% static 'app/images/logo/logo.svg' %}; </script>