webpack - 导入图像将导入base64编码的字符串(electron-webpack)

Question

我正在使用electron-webpack，但无法导入图像。我把它放在src/renderer/images/logo.png(我也有一个.svg，我已经尝试了相同的结果)，并且我都尝试了两个:

const logo = require("../images/logo.png");

和

import logo from "../images/logo.png";

我得到了损坏的图像，因此我使用https://base64.guru/converter/decode/file转换了base64，内容为:

module.exports = __webpack_public_path__ + "logo.png?41d52b7bd0bbc9f306e6075f8b7f80a0";

我究竟做错了什么？

Answer 1

我不确定您的期望是什么:您使用了electronic-webpack(https://github.com/electron-userland/electron-webpack/blob/e95cc47f7e0274d1e06f5ade6abf2e5745c8df82/packages/electron-webpack/src/targets/RendererTarget.ts#L45-L48)

为图片指定网址加载器:

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: {
          loader: "url-loader",
          options: configureFileLoader("imgs")
        }

并且url-loader将资源导入为b64(https://github.com/webpack-contrib/url-loader)

A loader for webpack which transforms files into base64 URIs

没有任何错误，并且可以按预期正确导入图像。

如果您想以其他方式导入资源，则可能需要更改配置以根据需要使用其他加载器。