使用Javascript和Django模板动态加载HTML图像

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 (ex logo1.svg, logo2.svg, etc.) to each value (ex 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?

Answer 1

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

Answer 2

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.