title: How to bind img src to data in Vue
body: <p>I have in my vue webpack script the following:</p>
  
  <pre><code>&lt;script&gt;
    export default {
      data () {
        return {
          repos: [
            {name: 'test1', src: '../assets/logo.png'},
            {name: 'test2', src: '../assets/underscore.png'},
             ...
          ]
        }
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>And then in my html, I'm trying to bind the local src element to an img but I can't get it to work. Here is what my html looks like:</p>
  
  <pre><code>&lt;div v-for="repo in repos" :key="repo.name"&gt;
    &lt;img :src="repo.src" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It works fine when my img source is not data-bound such as this:</p>
  
  <pre><code>&lt;img :src="../assets/logo.png" /&gt;
  </code></pre>
  
  <p><strong>Why won't my local images load if they are data bound in Vue?</strong></p>
  
  <p>Here is what my directory looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/u1Fel.png" rel="noreferrer"><img src="https://i.stack.imgur.com/u1Fel.png" alt="enter image description here"></a></p>