title: Dynamic HTML image loading using Javascript and Django templates
body: <p>I am trying to load a specific image using <code>javascript</code> in a <code>django</code> template, but seem to be running into an issue based on the way <code>django</code> tags are formatted.</p>
  
  <p>I have a standard <code>django</code> static asset source in an <code>img</code> tag like below:</p>
  
  <pre><code>{% load static %}
  &lt;img src="{% static 'img/folder/logo1.svg' %}" id="orgLogo" alt="Logo" height="100px"/&gt;
  </code></pre>
  
  <p>I am displaying data from <code>django</code> lower on the page like so:</p>
  
  <pre><code>&lt;a id="orgName" class="side_nav_item"&gt;{{ thing.org_name }}&lt;/a&gt;
  </code></pre>
  
  <p>What I would like to do is have the <code>img</code> <code>src</code> change based on the value of <code>thing.org</code> inside the <code>django</code> tags.</p>
  
  <p>I originally thought <code>jquery</code> would be the best option, but it doesn't seem to play nice with <code>django</code> tags:</p>
  
  <pre><code>$(document).on('load', '#orgName', function(){
      $('img').attr('src','{% static 'img/folder/''+$('#orgLogo').val()+' %}');
  });​​​​​​
  </code></pre>
  
  <p>I get error because of the single quotes required as part of the <code>django</code> syntax.</p>
  
  <p>I after I was able to get the basics of this <code>javascript</code> function to work, I was planning on using a <code>javascript</code> 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) <code>thing.org</code> can load (it's a pre-defined set of values that's not long and not likely to change).</p>
  
  <p>Any suggestions on how to approach this?</p>