Question

我下载并包含了url-loader for webpack：

loaders: [
  {
    test: /.jsx?$/,
    include: path.join(__dirname, './public/scripts'),
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
      presets: ['es2015', 'react']
    }
  },
  { 
    test: /\.css$/,
    loader: "style-loader!css-loader"
  },
  {
    test: /\.png$/,
    loader: "url-loader?limit=10000"
  },
]

在我的一个React组件中，我有这行代码，目前工作正常：

var style = { "backgroundImage": "url(images/icons/icon.png)" };

但是，这些图标很小，我希望它们作为base64内联，而不是作为图像单独发送。我找到了URL加载器并用以下代码替换了该行：

var style = { "backgroundImage": require("url?limit=10000!../images/icons/icon.png") };

这种方法的工作原因在于它找到了图像并用base64替换它，但它格式不正确。

我使用了base64解码器，发现生成的base64在解码时以module.exports =开头。这导致它使图像显示为空白。

我通过删除返回的base64的前25个字符来进行临时修复，但由于使用base64填充，因此它非常混乱。很难找到module.exports =结束的位置，然后在最后用=正确填充。

我觉得我一定做错了。如果没有，是否有另一个我可以使用的加载器，只是将图像作为base64返回而没有任何其他垃圾？

任何？

Answer 1

其实是因为这个配置：

{
  test: /\.png$/,
  loader: "url-loader?limit=10000" // <== limit
},

url-loader 获得 limit 选项，最大情况下只有 10000 字节，这意味着将转换 10k 字节 以上的文件。 >

您的问题是 5 年前，我们为 Webpack 和 url-loader 提供了几个新版本，它们的选项变成了 JavaScript 对象。您可以通过 boolean 或 number 来确定转换为外部文件或 base64 的限制。

为什么带webpack的url-loader返回格式错误的base64？

1 个答案: