title: Image from assets folder not displaying with Vue Js
body: <p>I have tried looking at different answers here but could not resolve my problem.
  I have got a Json server with some data:</p>
  <pre><code>file.json
      {
        &quot;post&quot;: [
          {
            &quot;id&quot;: &quot;1&quot;,
            &quot;title&quot;: &quot;Title&quot;,
            &quot;description&quot;: &quot;Este e um post para saberes mais clica aqui&quot;,
            &quot;article&quot;: &quot;Hoje este e um novo post etc e tal&quot;,
            &quot;photo&quot;: &quot;image-1.jpg&quot;
          },
          ]
      }
  </code></pre>
  <p>I want my component to render the image on 'photo' in a v-for as I don't want to hard code every time I add a new one. This is what I have in my component.vue:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;section&gt;
      &lt;h2 class=&quot;mt-32 flex justify-center text-3xl &quot;&gt;The Happy Algorithm&lt;/h2&gt;
      &lt;div class=&quot;grid grid-rows-4 grid-flow-col&quot;&gt;
        &lt;div class=&quot;ml-12 &quot; v-for=&quot;(post, index) in posts&quot; :key=&quot;index&quot;&gt;
          &lt;router-link :to=&quot;{ name: 'post', params: { id: post.id } }&quot;&gt;
            &lt;a href=&quot;&quot;
              &gt;&lt;img
                class=&quot; mt-8 pt-32 &quot;
                :src=&quot;`../assets/${post.photo}`&quot;
                :alt=&quot;post.title&quot;
            /&gt;&lt;/a&gt;
            &lt;h2&gt;{{ post.title }}&lt;/h2&gt;
            &lt;p class=&quot;text-justify text-sm pt-6&quot;&gt;
              {{ post.description }}
            &lt;/p&gt;
          &lt;/router-link&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import { api } from &quot;@/../services.js&quot;;
  
  export default {
    name: &quot;LatestPost&quot;,
    props: [&quot;id&quot;],
    data() {
      return {
        posts: [],
      };
    },
    methods: {
      getAllPosts() {
        this.posts = [];
        api.get(`/post`).then(response =&gt; {
          this.posts = response.data;
          console.log(this.posts);
        });
      },
    },
    created() {
      this.getAllPosts();
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>I have tested adding an online image instead of the one I have in my assets and works absolutely fine so I am not sure why doesn't work when I try to load the image from assets.</p>
  <p>This is how it displays</p>
  <p><a href="https://i.stack.imgur.com/2N0QS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2N0QS.png" alt="enter image description here" /></a></p>