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.
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.
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.
{% filter escapejs %}...{% endfilter %} ?
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.
{% filter escapejs %}...{% endfilter %} ?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
{% filter escapejs %}...{% endfilter %} ?Easy Workaround! :)
index.html
<input type="hidden" id="pic-src" value="{% static 'photos/1.jpg' %}">
script.js
var pic2.src = $('pic-src').val();
