找不到django文件错误：当静态目录中的javascript文件试图访问静态目录中的另一个文件时？

Question

我正在做一个django项目。 而且我可以从静态文件夹路径访问“ custom.js”文件。这是我的“ index.html”文件中的一行。

<script type="text/javascript" src="{% static 'crypto_app/js/custom.js' %}" ></script>

但是在“ custom.js”文件中，它使用的是：

$(window).ready(function() {
'use strict';
$.vegas('slideshow', {
  backgrounds:[
    { src: 'images/bg-slider/bg-1.jpg', fade:1000 },
    { src:'images/bg-slider/bg-2.jpg', fade:1000 },
    { src:'images/bg-slider/bg-3.jpg', fade:1000 }
})();

因此，由于文件地址错误，我无法访问图像。 并且它显示找不到文件。

是否有某种django方式将图像的路径声明为变量并从“ custom.js”文件访问它？ 下面是我的目录结构：

|   admin.py
|   apps.py
|   models.py
|   tests.py 
|   tree.txt
|   urls.py
|   views.py
|   
+---migrations
|   |   __init__.py|           
+---static
|   \---crypto_app      
|       +---css
|       |           
|       +---fonts      
|       +---images  
|       |   \---bg-slider
|       |           bg-1.jpg
|       |           bg-2.jpg
|       |           bg-3.jpg
|       |           
|       \---js
|               custom.js               
+---templates
|   \---crypto_app
|           index.html

Answer 1

首先回答您的问题，没有Django特定的东西使您在JavaScript文件中获得这些图像OOTB的路径。 Django会强迫您通过HTML进行访问（如示例2所示）。

您最有可能安装一些Django应用。

现在解决您的难题。 由于您使用的是{% static %}模板标签来加载JavaScript，因此您需要执行类似的操作。

当然，有几种方法可以实现这一目标：

1）对URL进行硬编码， {% static %}基本上将您的STATIC_URL以及您提供的路径STATIC_URL在一起。 因此，请使用相同的URL并将其附加到图像URL。 假设STATIC_URL设置为/static/新的硬编码url /static/images/bg-slider/bg-1.jpg等。

2）创建一个选项对象并将其添加到window 。 在您的index.html ：

<script>
    window.options = {
        staticUrl: {{ STATIC_URL }},
    };
</script>

然后在您的JS代码中使用它

backgrounds:[
    { src: `${window.options.staticUrl}images/bg-slider/bg-1.jpg`, fade:1000 },
}

自然，如果只有一个地方可以做到这一点，那么此时硬编码将是最简单的选择。 :)

骇客入侵！