title: DOM background-Image add
body: <p>I'm a beginner.</p>
  <p>I encounter a small problem which is I cannot add an image to my div block.</p>
  <p>here is my HTML code</p>
  <pre><code>&lt;span class = 'memepic'&gt;
  &lt;img src =&quot;https://encryptedtbn0.gstatic.com/imagesq=tbn:ANd9GcTmvCGIVavqB6jVObiS1sqkvwlzYgpjCVfWBg&amp;usqp=CAU&quot;&gt;
  &lt;/span&gt;
  </code></pre>
  <p>and I wrote my js code is like this one</p>
  <pre><code>//it is my &lt;span&gt; id
  const img = document.getElementsByClassName('memepic') 
  
  //it is my divblock id
  const memebox = document.querySelector('#meme')
  
  
  for(i of img){
      i.addEventListener(&quot;click&quot;, function(e) {
          console.log(e)
          memebox.style.backgroundImage = 'url(&quot;e.path[0].currentSrc&quot;)';
  
        });
  }
  
  </code></pre>
  <p>the error shows my console is</p>
  <pre><code>e.path[0].currentSrc:1 GET file:///C:/Users/kevin/Desktop/bootcamp/officialclass/meme%20generator/e.path[0].currentSrc net::ERR_FILE_NOT_FOUND
  
  </code></pre>
  <p>my purpose is when I click that picture, that picture will show on my divblock which is in the center of the screen.</p>
  <p>I checked the path[0].currentSrc is correct.
  and it will show the picture if I replace 'e.path[0].currentSrc' to the content inside the 'e.path[0].currentSrc'.</p>
  <p>like this</p>
  <pre><code>memebox.style.backgroundImage = 'url(&quot;https://encryptedtbn0.gstatic.com/imagesq=tbn:ANd9GcTmvCGIVavqB6jVObiS1sqkvwlzYgpjCVfWBg&amp;usqp=CAU&quot;);
  </code></pre>