title: use url-loader in vue for images in a specific directory
body: <p>Vue-cli has already configured url-loader to load base64 url encoded images for images smaller than 4kb. I need to load all images from a specific assets directory, let's say <code>@/assets/img/pdf</code>, as base64 to embed them into a pdfmake pdf.</p>
  
  <p>I've already been trying to modify <code>vue.config.js</code> as described in <a href="https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports" rel="nofollow noreferrer">documentation</a> to edit the <code>images</code> rule but of course this impacts all images on the site and it's not what I want.</p>
  
  <p>I tried to add a new rule to use url-loader on files from a single directory</p>
  
  <pre class="lang-js prettyprint-override"><code>module.exports = {
    chainWebpack: (config) =&gt; {
      config.module
        .rule('base64img')
        .test(/src\/assets\/img\/pdf\/(.*)\.+(png|jpe?g|gif)$/i)
        .use('url-loader')
        .loader('url-loader')
        .options({
          limit: 102400,
          fallback: { loader: 'file-loader' },
        })
        .end();
    },
  };    
  </code></pre>
  
  <p>I import different images and add them to my template</p>
  
  <pre class="lang-js prettyprint-override"><code>import test1 from '@/assets/img/pdf/test1.png';
  import test2 from '@/assets/img/pdf/test2.png';
  import test3 from '@/assets/img/test3.png';
  </code></pre>
  
  <p>test3 is loaded as expected, but wierd things happen with test1 and test2. test1 (that is bigger than limit parameter) seems to be encoded with an unknown image </p>
  
  <pre><code>data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICI2YmUzZjE4YmY5OGM0ZTNjYWI2MzQxYWI5ZjhmNWJmNi5wbmciOw==
  </code></pre>
  
  <p>and test2 (smaller than limit parameter) seems to be loaded with fallback file-loader but with a wrong hash that is not displaying the image.</p>
  
  <p>Totally opposite on what expected, however none of the two images is displayed.</p>