title: Image not showing with Vue
body: <p>I am trying to import an image file from a parent folder in the <code>public/images</code> folder to a component (<code>Categories.vue</code>), but the image is not showing up.</p>
  
  <p>This is the folder structure:</p>
  
  <p><img src="https://i.stack.imgur.com/XaSaQ.png" alt="folder structure"></p>
  
  <p>And this is the code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class="container"&gt;
        &lt;div class="row"&gt;
            &lt;div v-for="item in items" :key="item.name" class="col-lg-3 col-md-3"&gt;
                &lt;div class="img-container"&gt;
                    &lt;img v-bind:src="item.src" alt="" class="img-fluid"&gt;
                    &lt;p class="text-dark"&gt; {{ item.subtitle }} &lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data() {
      return {
        items: [
          {   
            name:'first', 
            src:'./public/images/anubis.png', 
            subtitle: 'Anubis' 
          },
          { 
            name:'second', 
            src:'public/images/sarcophagus.png', 
            subtitle: 'Sarcophagus' 
          },
          { 
            name:'third', 
            src:'public/images/ra.png', 
            subtitle: 'Ra' 
          },
          { 
            name:'fourth', 
            src:'public/images/eye-of-ra.png', 
            subtitle: 'Eyes of Ra' 
          }
        ]
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I am pretty sure that I did everything right. I tried using <code>require()</code>, but also failed. How can I fix this problem?</p>