Dynamic HTML image loading using Javascript and Django templates

Question

I am trying to load a specific image using javascript in a django template, but seem to be running into an issue based on the way django tags are formatted.

I have a standard django static asset source in an img tag like below:

{% load static %}
<img src="{% static 'img/folder/logo1.svg' %}" id="orgLogo" alt="Logo" height="100px"/>

I am displaying data from django lower on the page like so:

<a id="orgName" class="side_nav_item">{{ thing.org_name }}</a>

What I would like to do is have the img src change based on the value of thing.org inside the django tags.

I originally thought jquery would be the best option, but it doesn't seem to play nice with django tags:

$(document).on('load', '#orgName', function(){
    $('img').attr('src','{% static 'img/folder/''+$('#orgLogo').val()+' %}');
});

I get error because of the single quotes required as part of the django syntax.

I after I was able to get the basics of this javascript function to work, I was planning on using a javascript switch statement to test for specific values and assign an image (e.x. logo1.svg, logo2.svg, etc.) to each value (e.x. org1, org2, org2) thing.org can load (it's a pre-defined set of values that's not long and not likely to change).

Any suggestions on how to approach this?

Can you use double quotes in js instead of single? Or perhaps store thing.org_name in a JS var and then use that var instead of the string itself? — SuperStew
– SuperStew, Commented Sep 20, 2018 at 17:47
Think about it: the {% static %} template tag is evaluated by your back-end, when producing an HTML document. It doesn't exist on the front-end so it's not available anymore when your HTML/javascript reaches the browser and your javascript runs. So: create a dummy URL javascript variable (var baseURL = "{% static 'img/folder/ %}") somewhere, and in your javascript manipulate this baseURL by appending the correct value. — dirkgroten
– dirkgroten, Commented Sep 20, 2018 at 17:53
And always check your javascript source code in your browser developer tools to see if django generated the correct variables if things don't go as expected. — dirkgroten
– dirkgroten, Commented Sep 20, 2018 at 17:55

dirkgroten · Accepted Answer · 2018-09-20 18:03:31Z

You can't combine stuff that is evaluated on the back-end, on your server (template tags) and stuff that's evaluated on the front-end, inside the end-user's browser (javascript): Your {% static %} template tag needs to be evaluated by Django before an HTML document is sent to the browser. You're trying to mix javascript evaluated variables into the {% static %} tag but that makes no sense since they get evaluated at completely different points in time (and on different computers).

You can use template tags to create strings of course and then use that later in javascript:

var baseURL = "{% static 'img/folder/' %}"
$(document).on('load', '#orgName', function(){
    $('img').attr('src', baseURL + $('#orgLogo').val());
});

If you look at the HTML source file in your browser developer tools you'll see this:

var baseURL = "https://mycdn.net/static/img/folder/"  // or whatever your STATIC_URL is

Chris · Accepted Answer · 2018-09-21 14:29:45Z

0

I was able to solve this without using javascript.

Here is the working code:

{% load staticfiles %}
<img src="{% with 'img/folder'|add:thing.orgName|add:'.svg' as image_static %}
   {% static image_static %}
   {% endwith %}
   {% load static %}" id="orgLogo" alt="Logo" height="100px"
/>

The image file has to be the same name as the value of thing.orgName, but for my use case, that's not a problem because those names will likely never change or change very, very rarely.

answered Sep 21, 2018 at 14:29

Chris

3791 gold badge4 silver badges16 bronze badges

Collectives™ on Stack Overflow

Dynamic HTML image loading using Javascript and Django templates

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related