title: Get background-image src from div and set that as an image's src
body: <p>So I'm trying to grab the background-image from a div when it is clicked and set it as the src of an img element somewhere else on the page. The issue is that I'm getting an error saying that the file is not found. I understand that this has something to do with the path that I'm assigning to the img's src, however I am unable to see what's wrong with the code.</p>
  
  <p>When the div in question is clicked it calls a function </p>
  
  <pre><code>document.getElementById('rice-bowl').onclick=openModal; 
  </code></pre>
  
  <p>And below is the actual function</p>
  
  <pre><code>var openModal=function(){
          var image= $(this).css('background-image').slice(4,-1);
          console.log(image);
          var modalImg = document.getElementById("img01");
          modalImg.src = image;
          console.log(modalImg.src);
      }
  </code></pre>
  
  <p>The two <a href="https://i.stack.imgur.com/TMuah.png" rel="nofollow noreferrer">outputs to console</a> should be the same according to this logic however, they are not. Again, any help would be greatly appreciated!</p>