47

In my script.js:

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

Why in the world this happens? Since in my home.html, the {% static 'path' %} works:

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

And is it {% load staticfiles %} or {% load static %} ? Both work for me, script.js is loaded.

lucahuy
  • 790
  • 2
  • 9
  • 22
  • Yes, because the html file is a template but the static files are not treated as such. – Simeon Visser Jan 13 '15 at 22:53
  • Thanks for your quick reply Simeon! So pic.src="static/photos/1.jpg" is the only way? – lucahuy Jan 13 '15 at 22:59
  • If you really wanted your javascript to be rendered from templates/views, you could easily do that. But it's probably not what you want. More likely, you want the bulk of your js to be static files and then to add view-specific code to the bottom of a template in a – dylrei Jan 14 '15 at 01:27

4 Answers4

57

Since you are using django's template language you can ONLY do this within your template between <script> tags. In other words if you wished to use your pic2.src javascript variable in an external script then you would need to declare it between <script> tags like so

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

And then you could access it in your external scripts that you might load like this:

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

Regarding your question concerning load static and load staticfiles there is little distinction. Both act as a joiner for the STATIC_URL in your settings.py and the actual path to the file itself so both should work for your case. See here and here for more info.

alacy
  • 4,972
  • 8
  • 30
  • 47
  • 3
    it is important to note that if you're using a cloud service to store static files (e.g. AWS S3), then there will be a significant difference between `load static` and `load staticfiles` which is something that got me a few times. `staticfiles` dynamically gets the correct backend where files are stored, while `static` just always uses the default. if you use `static` instead of `staticfiles` then your code will not work properly in aws. – Deven Mar 22 '18 at 17:57
  • Shouldn't these be surrounded with `{% filter escapejs %}...{% endfilter %}` ? – Flimm Sep 29 '20 at 16:28
  • 1
    I'm not a web developer so this might seem trivial but is it a good idea to write JS code into the HTML, I know it's accepted but mixing the two of them together seems like it could lead to some difficulties in the long run for developers but also some security issues – Iustinian Olaru Aug 27 '21 at 06:04
18

If you need many static (or media) url's in your .js files, this might be more convenient:

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

Then both url's are freely available in all javascript files.

knbk
  • 52,111
  • 9
  • 124
  • 122
  • this will cause an issue with collectstatic on deployment. – N K Dec 11 '15 at 01:33
  • @NK What kind of issue? – knbk Dec 11 '15 at 13:08
  • I thought creating urls like this was causing the problem - that for any urls not created with {% static %} , the resources were not being collected. But I found later that the problem was something else, and these are possibly being collected in the postprocessing phase. – N K Dec 11 '15 at 20:08
  • However, it will not enable cache-busting using Manifest-Storage on deployment, since you will have an unhashed reference. – N K Dec 11 '15 at 20:45
  • Shouldn't these be surrounded with `{% filter escapejs %}...{% endfilter %}` ? – Flimm Sep 29 '20 at 16:28
13

You can assign the path in your template and then use it in your javascript file.

Template:

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

Javascript:

pic2.src = url
nima
  • 6,566
  • 4
  • 45
  • 57
4

Easy Workaround! :)

index.html

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

script.js

var pic2.src = $('pic-src').val();
tri.akki7
  • 121
  • 2
  • 8