javascript 文件中的 Django {% static 'path' %}

Question

在我的 script.js:

pic.src = "/static/photos/1.jpg"; // This works
pic2.src = "{% static 'photos/1.jpg' %}" // Does not work

为什么会发生这种情况？由于在我的 home.html 中，{% static 'path' %} 有效：

{% load staticfiles %}
<script src="{% static 'script.js' %}"></script>  // This works

是 {% load staticfiles %} 还是 {% load static %}？两者都对我有用，script.js 已加载。

Answer 1

您可以在模板中分配路径，然后在 javascript 文件中使用它。

模板：

<script>
    var url = "{% static 'photos/1.jpg' %}";
</script>

Javascript:

pic2.src = url

Answer 2

由于您使用的是 django 的模板语言，因此您可以只能在 <script> 标记之间的模板中执行此操作。换句话说，如果您希望在外部脚本中使用 pic2.src javascript 变量，那么您需要在 <script> 标签之间声明它，如下所示

<script>
    var pic2.src = "{% static "photos/1.jpg" %}"
</script>

然后您可以在您可能加载的外部脚本中访问它：

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

关于您关于 load static 和 load staticfiles 的问题，两者几乎没有区别。两者都充当 settings.py 中 STATIC_URL 的连接器和文件本身的实际路径，因此两者都适用于您的情况。有关详细信息，请参阅 here and here。

Answer 3

如果您的 .js 文件中需要很多静态（或媒体）url，这可能更方便：

<script>
    var static_url = "{% get_static_prefix %}";
    var media_url = "{% get_media_prefix %}";
</script>

然后两个 url 都可以在所有 javascript 文件中免费获得。

Answer 4

简单的解决方法！ :)

index.html

<input type="hidden" id="pic-src" value="{% static 'photos/1.jpg' %}">

script.js

var pic2.src = $('pic-src').val();

Django {% static 'path' %} in javascript file