问Django无法使用静态引用在外部js文件中加载svg文件
EN

Stack Overflow用户

提问于 2022-05-04 04:20:17

回答 1查看 77关注 0票数 0

我需要从我的javascript代码中加载一个svg文件，该代码包括在我的index.html中。我理解jinja模板不能在js外部文件中使用。因此，作为一种解决办法，我将同样的内容存储在我的whiteLogo和徽标变量中，这是我在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";
    }
};

编辑:

试过这个

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>

templates

jinja2

javascript

python

django

人脸核身产品特惠

用户政务民生、金融、通信运营商等场景，接入全面，安全可靠新用户3折起

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-05-04 07:13:03

我们使用在index.html中创建的变量徽标分配给在javascript文件main.js中创建的logo变量。

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