title: Load static assets with vue-cli 3.x
body: <p>I have a vue-cli 3 project setup with the following directory structure:</p>
  
  <p><a href="https://i.stack.imgur.com/2W6Zx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2W6Zx.png" alt="enter image description here"></a></p>
  
  <p>All static assets are loaded in the <strong>public directory</strong> and are compiled and built successfully on <em>localhost</em>. </p>
  
  <p>As seen in the image below, <em>guyana-live-logo.png</em>, <em>slide-1.jpg</em> and <em>970x250-ad.png</em> are all loaded successfully, however, only the logo and the ad image appears in the browser.</p>
  
  <p><a href="https://i.stack.imgur.com/JlGBN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JlGBN.png" alt="enter image description here"></a></p>
  
  <h2>What I've tried</h2>
  
  <ol>
  <li><strong>Changing the way the image is referenced.</strong></li>
  </ol>
  
  <p><em>Original - which works for almost all other images</em></p>
  
  <pre><code>&lt;img src="/img/slide-1.jpg"/&gt;
  </code></pre>
  
  <p><em>Test 0 - this loaded the image with a hash appended (slide-1.1b0ahsa.jpg) but it still did not appear in the browser</em></p>
  
  <pre><code>&lt;img src="../../../public/img/slides/slide-1.jpg"&gt;
  </code></pre>
  
  <p><em>Test 1 - using v-bind</em></p>
  
  <pre><code>&lt;img :src="'/img/slide-1.jpg'"/&gt;
  </code></pre>
  
  <ol start="2">
  <li><p><strong>Moving the image inside the src directory and the component sub-directory</strong> both of which proved futile.</p></li>
  <li><p><strong>Updating vue-loader</strong></p></li>
  <li><p><strong>Building for production and serving only the /dist folder</strong></p></li>
  </ol>
  
  <h2>Key notes</h2>
  
  <ul>
  <li>The console or my bug tracking software produces no error.</li>
  <li>Image format doesn't seem to be the problem, some <code>.png</code> loads while others don't, the same is true for <code>.jpg</code>.</li>
  <li>Some JavaScript files are affected. JS files are being called like this: <code>&lt;script type="text/javascript" src="&lt;%= BASE_URL %&gt;js/script.js"&gt;&lt;/script&gt;</code> in <strong>public/index.html</strong></li>
  </ul>