Question

Vue-cli已经配置了url-loader来为小于4kb的图像加载base64 url编码的图像。我需要从特定资产目录（例如@/assets/img/pdf）中将所有图像加载为base64，以将其嵌入到pdfmake pdf中。

我已经在尝试按照documentation所述修改vue.config.js来编辑images规则，但是当然这会影响网站上的所有图像，这不是我想要的。

我试图添加一个新规则，以对单个目录中的文件使用url-loader

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参数）似乎已使用后备文件加载器加载，但具有不显示图像的错误散列。

与预期完全相反，但是两个图像均不显示。

Answer 1

首先，要指定资产位置，您需要“包含”它，而不是在测试正则表达式中配置它。

其次，您需要为所需路径的 images 规则添加新规则：

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('images') // -> Default configuration
      .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 4096,
        fallback: {
          loader: 'file-loader',
          options: { name: 'img/[name].[hash:8].[ext]' },
        },
      })
      .end()

      .rule('images') // -> Custom rule specification
      .test(/\.(png|jpe?g|gif)$/)
      .include.add(/src\/assets\/img\/pdf\/.*/)
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 102400,
        fallback: {
          loader: 'file-loader',
          options: { name: 'img/pdf/[name].[hash].[ext]' },
        },
      })
      .end()
  },
}

通过向选项添加 dist 为 name 文件夹中导出的文件配置名称在调试时非常有用。

此外，您可以在控制台中运行 vue inspect --rule images 来查看 vue-cli 使用的规则并确认路径是否正确。

在vue中使用url-loader在特定目录中获取图像

1 个答案: