从Django中的Javascript引用静态图像

Question

所以我正在研究一个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页面中,那么图像渲染就可以了.这也是在开发环境中,而不是生产 - 我将在后面处理这个问题.

是什么赋予了？我认为既然该行应该写入包含上述'load staticfiles'行的文档,那么图像将只用HTML的其余部分呈现.任何关于如何解决这个问题或以不同方式完成它的建议将不胜感激!

Answer 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