在 Django 中从 Javascript 引用静态图像答案

【问题标题】：Reference Static Images From Javascript in Django在 Django 中从 Javascript 引用静态图像
【发布时间】：2013-07-27 10:00:23
【问题描述】：

所以我正在处理一个 Django 项目，并试图弄清楚如何让 Javascript 能够从我的静态目录中呈现图像。我已修改我的 settings.py 以从 myproject/static 加载静态文件（图像、js 等），并从 myproject/templates 加载我的模板。现在，在每个模板的顶部，我都有以下行：

{% load staticfiles %}

这允许我在模板中加载这样的图像：

<img src="{% static "images/someImage.jpg" %}" width="65" height="36" alt="SomeImage"/>

现在，这一切正常 - 图像加载并按预期显示在页面上。但是我正在尝试这样做（好吧，我的队友无论如何都是）：

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

这一行与上面两行在同一个文件中。 getHeader.js 文件：

var time = new Date();
var month = time.getMonth();
var day = time.getDate();
var year = time.getFullYear();

if (month == 1 & day == 23 & year == 2013) {
  document.write('<img src="{% static "images/anotherImage.png" %}" width="680" height="210" />');
} else {
  document.write('<img src="{% static "images/yetAnotherImage.png" %}" width="680" height="210"/>');
}

澄清一下，这个想法是在某个预定义的日期打印不同的标题。出于明显的原因，我试图将任何图像/html与渲染模板的 Python 代码分开，所以我不想只将图像名称作为参数传递。代码本身运行良好，但是当页面加载时会出现 alt 名称，但图像本身不会；只是那些通用的空“找不到图像”框之一。

可能值得一提的是，如果我将此 Javascript 内联到实际的 HTML 页面中，图像就可以很好地呈现。这也是在开发环境中，而不是在生产环境中——我将在以后处理这个问题。

什么给了？我想，既然该行应该写入包含上述“加载静态文件”行的文档，那么图像只会与 HTML 的其余部分一起呈现。任何有关如何解决此问题或以不同方式完成此问题的建议将不胜感激！

【问题讨论】：

标签： python django django-staticfiles

【解决方案1】：

getHeader.js 与 django 没有任何关系。它只是浏览器加载的文本文件。因此它不知道像 {% static %} 或 {{ foo }} 这样的 django 语法。

有几种方法可以解决这个问题。一种常见的方法是定义一个全局 javascript 变量，即您的 STATIC_URL，然后您可以在以后的 JS 文件中引用它。

<script type="text/javascript">
    DJANGO_STATIC_URL = '{{ STATIC_URL }}';
</script>

另一个是使用Django Compressor之类的东西，可以通过django的模板系统渲染JS。 https://github.com/jezdez/django_compressor

【讨论】：

谢谢！这正是我所需要的