title: how to set background image url for local files?
body: <p>I want to paste a relative image url to a div to set it as the background image. Unfortunately the div won't render the image. So this works fine and renders the image</p>
  
  <pre><code>&lt;img src="../assets/images/HeroImg.jpg"&gt;
  </code></pre>
  
  <p>but this one doesn't</p>
  
  <pre><code>&lt;div style="background-image: url(../assets/images/HeroImg.jpg)"&gt;
      Content goes here
  &lt;/div&gt;
  </code></pre>
  
  <p>Things I also tried:</p>
  
  <ul>
  <li>wrapping the url inside single quotes</li>
  <li><code>assets/images/HeroImg.jpg</code> maybe?</li>
  <li><code>./assets/images/HeroImg.jpg</code> starting from the src folder</li>
  <li><code>images/HeroImg.jpg</code> and <code>./images/HeroImg.jpg</code> starting from the assets folder</li>
  </ul>
  
  <p>What is the correct url to use for background images?</p>
  
  <hr>
  
  <p><strong>Update</strong></p>
  
  <p>I'm using VueJs so things might be different here? Steps to reproduce:</p>
  
  <ul>
  <li>Create a new project using the Vue CLI</li>
  <li>Create a <code>images</code> directory in <code>src/assets</code></li>
  <li>Create an image in <code>src/assets/images</code> and call it <code>HeroImg</code></li>
  <li>Update App.vue file with</li>
  </ul>
  
  <p>.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;div&gt;
        This works:
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img src="./assets/images/HeroImg.jpg"&gt;
      &lt;/div&gt;
      &lt;div&gt;
        This doesn't work:
      &lt;/div&gt;
      &lt;div style="background-image: url('./assets/images/HeroImg.jpg')"&gt;
          Content without background image
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>You will see that the img tag renders the image but not the div with the background image.</p>