Импорт изображения - это импорт строки в кодировке base64 (электронный пакет)

Question

Я использую электронный веб-пакет и не могу импортировать изображение.У меня он расположен по адресу src/renderer/images/logo.png (у меня также есть файл .svg, который я пробовал с тем же результатом), и я пробовал оба:

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

и

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

Iполучить поврежденное изображение, поэтому я использовал https://base64.guru/converter/decode/file для преобразования base64, а содержимое:

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

Что я делаю не так?

Answer 1

Я не уверен, что вы ожидаете: вы использовали электронный веб-пакет (https://github.com/electron-userland/electron-webpack/blob/e95cc47f7e0274d1e06f5ade6abf2e5745c8df82/packages/electron-webpack/src/targets/RendererTarget.ts#L45-L48)

, в котором указан url-загрузчик для изображения:

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

, а url-загрузчик импортируетресурс как b64 (https://github.com/webpack-contrib/url-loader)

Загрузчик для веб-пакета, который преобразует файлы в URI-адреса base64

В этом нет ничего плохого, и изображения импортируются правильно, как и ожидалось.

Если вы хотите импортировать ресурс другим способом, вам может потребоваться изменить конфигурацию, чтобы использовать другой загрузчик по вашему желанию.