This is an old trick, that’s been very handy
.
Many times for various reasons you’ll need to access your media files from your Javascript files, to display images, change paths, or whatever. And in most cases your development MEDIA_URL and production MEDIA_URL will be different, so having to change them depending on the enviroment can be a bit tricky being them static files I’m assuming you are using static files your your .js right?.
What I do to help this is add the following to my base.html :
<script type="text/javascript">
var MEDIA_URL = "{{MEDIA_URL}}";
</script>
before I load any of my .js files, and in them I simply refer to the MEDIA_URL variable just as in my Django templates.
Of course, you need to have your settings.MEDIA_URL variable on template context via whatever method you feel mor confortable with, personally I use context_processors
.
