CODEWITHSUNDEEP
django
lucahuy
lucahuy

Reputation: 800

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

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.

Upvotes: 47

Views: 64885

Answers (4)

tri.akki7
tri.akki7

Reputation: 129

Easy Workaround! :)

index.html

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

script.js

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

Upvotes: 5

knbk
knbk

Reputation: 53679

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.

Upvotes: 22

alacy
alacy

Reputation: 5074

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.

Upvotes: 57

nima
nima

Reputation: 6733

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

Upvotes: 13

Related Questions