title: display images through javascript
body: <p>I am working on quiz project using Django where I have to show an image on 5 different questions, handled by javascript. But somehow the images are not being shown:
  Here is code in js file:</p>
  
  <pre><code>    if(ques_no == 4 || ques_no == 8 || ques_no == 9 || ques_no == 13 || ques_no == 16)
  {
    if(ques_no == 4)
    {
      document.getElementById("img").style.display="block";
      document.getElementById("img").style.backgroundImage="url('images/soccercity.jpg')";
    }
    if(ques_no == 8)
    {
      document.getElementById("img").style.display="block";
      document.getElementById("img").style.backgroundImage="url('images/Portugal_badge.png')";
    }
    if( ques_no == 9)
    {
      document.getElementById("img").style.display="block";
      document.getElementById("img").style.backgroundImage="url('images/Ragnar-Klavan.jpeg')";
    }
    if(ques_no == 13)
    {
      document.getElementById("img").style.display="block";
      document.getElementById("img").style.backgroundImage="url('images/rcd.png')";
    }
    if(ques_no == 16)
    {
      document.getElementById("img").style.display="block";
      document.getElementById("img").style.backgroundImage="url('images/zakumi.png')";
    }
  </code></pre>
  
  <p>Here is code for css file which is working fine:</p>
  
  <pre><code>.background{
   background-image: url("images/football.jpg");
   background-size: cover;
   background-repeat: no-repeat;
   position: relative;
   min-height:100vh;
   }
  </code></pre>
  
  <p>Although when I display image through CSS, it works perfectly fine, but not through js file. Maybe the fault is in defining the URL but then it's working fine through CSS then why not js.</p>
  
  <p>Images are stored in the images sub-directory of static directory.
  .js and .css files are stored in static directory.</p>