используйте url-загрузчик в vue для изображений в определенном каталоге

Question

Vue-cli уже настроил url-загрузчик для загрузки изображений в кодировке base64 url ​​для изображений размером менее 4 КБ. Мне нужно загрузить все изображения из определенного каталога ресурсов, скажем, @/assets/img/pdf, как base64, чтобы встроить их в pdfmake pdf.

Я уже пытался изменить vue.config.js, как описано в документация для редактирования правила images, но, конечно, это влияет на все изображения на сайте, и это не то, что я хочу.

Я попытался добавить новое правило для использования url-загрузчика для файлов изодин каталог

module.exports = {
  chainWebpack: (config) => {
    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();
  },
};    

Я импортирую разные изображения и добавляю их в свой шаблон

import test1 from '@/assets/img/pdf/test1.png';
import test2 from '@/assets/img/pdf/test2.png';
import test3 from '@/assets/img/test3.png';

test3 загружается, как и ожидалось, но с test1 и test2 происходят странные вещи. test1 (это больше, чем параметр limit), кажется, закодирован с неизвестным изображением

data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICI2YmUzZjE4YmY5OGM0ZTNjYWI2MzQxYWI5ZjhmNWJmNi5wbmciOw==

, а test2 (меньше, чем параметр limit) загружается с резервным загрузчиком файлов, но с неправильным хешем, которыйизображение не отображается.

Абсолютно противоположно ожидаемому, однако ни одно из двух изображений не отображается.