Django無法使用靜態參考在外部js檔案中加載svg檔案-有解無憂

我需要從包含在 index.html 中的 javascript 代碼中加載一個 svg 檔案。我知道 jinja 模板不能在 js 外部檔案中使用。因此，作為一種解決方法，我將相同的內容存盤在我在 js 代碼中使用的 whiteLogo 和 logo 變數中。

但是當我運行服務器并在頁面上滾動時出現錯誤，即找不到資源。

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

我哪里出錯了，我是否正確加載了徽標路徑？

索引.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;
    }

索引.html

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

uj5u.com熱心網友回復：

我們使用我們在 index.html 中創建的變數 logo 分配給logo在 javascript 檔案 main.js 中創建的變數

var logo = document.querySelector('.navbar-brand img')

從我這邊看，這是一個愚蠢的錯誤。

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/473697.html

標籤：javascript Python django 模板神社2

上一篇：在運行時更改模板型別

下一篇：如何讓模板函式接受任何你可以構造一些basic_string_view的東西