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

Question

在我的脚本中.js：

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

为什么会这样？由于在我家.html，{% 静态"路径"%} 有效：

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

它是 {% 加载静态文件 %} 还是 {% 负载静态 %} ？两者都对我有用，脚本.js已加载。

Answer 1

由于您使用的是 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的连接器和文件本身的实际路径，因此两者都应该适用于您的情况。请参阅此处和此处以获取更多信息。

Answer 2

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

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

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

Answer 3

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

模板：

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

Javascript：

pic2.src = url

Answer 4

简单的解决方法！ :)

索引.html

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

脚本.js

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