Reference Static Images From Javascript in Django

Question

So I'm working on a Django project and am trying to figure out how to get Javascript to be able to render images from my static directory. I've modified my settings.py to load static files (images, js, etc.) from myproject/static and my templates from myproject/templates. Now at the top of each of these templates I have the following line:

{% load staticfiles %}

which allows me to load images like this in the template:

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

Now, this works just fine - the image loads and is presented as expected on the page. However I'm trying to do this (well, my teammate is but anyway):

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

This line being in the same file with the above two lines. The getHeader.js file:

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"/>');
}

Just to clarify, the idea is to print a different header on some predefined day. I'm trying to keep any images/html separate from the Python code rendering the templates for obvious reasons, so I don't want to just pass in the image name as a parameter. The code itself runs fine, however when the page is loaded the alt name appears but the image itself does not; just one of those generic empty "image not found" boxes.

It's probably worth mentioning that if I inline this Javascript into the actual HTML page that the image renders just fine. Also this is in a development environment, not production - I'm going to deal with that later down the road.

What gives? I figured that since that line should be written to the document containing the above 'load staticfiles' line then the image would just be rendered with the rest of the HTML. Any suggestions as to how to fix this or accomplish it differently would be greatly appreciated!

Answer 1

getHeader.js is not related to django in any way. It's just a text file being loaded by the browser. Therefore it's not aware of django syntax like {% static %} or {{ foo }}.

There are a few ways around this.. a common way is to define a global javascript variable which is your STATIC_URL which you can then reference in future JS files.

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

Another is to use something like Django Compressor which can render JS through django's template system. https://github.com/jezdez/django_compressor