title: Why don't my images load in Vue.js 2?
body: <p>I'm trying to get my images to load via a relative path in Vue.js 2 but something seems off. I'm just getting my feet wet with regard to Vue and would appreciate any pointers. Said images are in the /src/assets/imgs directory.</p>
  
  <p>Below are the relevant code snippets for the component in question. </p>
  
  <p><a href="https://i.stack.imgur.com/xwHiB.png" rel="noreferrer"><img src="https://i.stack.imgur.com/xwHiB.png" alt="File tree screenshot"></a></p>
  
  <pre><code>&lt;template&gt;
    &lt;section class="container sources"&gt;
          &lt;h2&gt;{{ heading }}&lt;/h2&gt; 
          &lt;div class="columns"&gt;
              &lt;div class="column" v-for="source in sources"&gt;
                  &lt;figure :title="source"&gt;
                      &lt;img :src="imgPath + source + '.png'" :alt="source + ' logo'"&gt;
                      &lt;figcaption&gt;{{ source }}&lt;/figcaption&gt;        
                  &lt;/figure&gt;        
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
     name: 'sources',
     data () {
        return {
            heading: 'News Sources',
            imgPath: 'src/assets/imgs/',
            sources: [
              'al-jazeera-english', 'associated-press', 'bbc-news', 'bbc-sport', 'business-insider', 'cnn', 
              'daily-mail', 'entertainment-weekly', 'espn', 'financial-times', 'fox-sports', 'hackernews', 
              'ign','independent', 'mtv-news', 'national-geographic', 'new-scientist', 'reuters', 'techcrunch', 'the-economist', 'the-guardian-uk', 'the-huffington-post', 'the-new-york-times', 
                  'the-washington-post'
             ]
        }
     }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Edit:</strong> Added a screenshot of my project's (simple) file tree upon request. Said images are in the 'imgs' folder, of course.</p>