title: Vue PublicPath not getting the root url for some conditions
body: <h2>The Code</h2>
  <p>I have a Vue App with this structures :</p>
  <ul>
  <li>public
  <ul>
  <li>img
  <ul>
  <li>logo.png</li>
  </ul>
  </li>
  </ul>
  </li>
  <li>src</li>
  </ul>
  <p>And i have this <code>router.js</code></p>
  <pre><code>const router = new Router({
    mode: &quot;history&quot;,
    routes: [
      {
        path: '/',
        redirect: 'dashboard',
        component: UITemplate,
        children: [
          {path: '/dashboard', name: 'dashboard', component: () =&gt; import('/views/Dashboard.vue')},
          {path: '/admin/role', name: 'role', component: () =&gt; import('/views/Role.vue')},
        ]
      }
    ]
  })
  </code></pre>
  <p>And this <code>vue.config.js</code></p>
  <pre><code>module.exports = {
  ...
     publicPath: '/'
  ...
  }
  </code></pre>
  <h2>The Problem</h2>
  <p>Let's say i want to link an <code>src</code> to an <code>img</code> in UITemplate component. It looks like this</p>
  <pre><code>&lt;img :src=&quot;/img/brand/logo.png&quot; /&gt;
  </code></pre>
  <p>If i try this on <code>localhost:8080/dashboard</code>, the image is perfectly shown.
  But when i try on <code>localhost:8080/admin/role</code>, the image is not showing.</p>
  <p>I looked up in Network Panel and it tries to find the file in this url :
  <code>localhost:8080/admin/role/img/logo.png</code></p>
  <p>So how to perfectly use the publicPath in Vue so the publicPath will always start from the public folder (without adding /admin/role)? I tried another solutions by adding <code>base</code> to Router, <code>publicPath</code> in <code>webpack.config.js</code>, but it's still not working</p>