首页 > 解决方案 > 为什么我打包的 Electron 应用程序不显示 SVG?

问题描述

我正在使用电子打包器来打包我的应用程序,但与开发版本相比,生产版本中没有出现 SVG。

构建文件包含 SVG,但不知何故,它们仍然没有出现在我的产品构建中。我只是直接导入 SVG 并将其显示为 . 不过,非 SVG 图像似乎工作正常。

这是两人并排的照片。任何想法为什么会发生这种情况?

这是您在屏幕截图中看到的组件。

import React, { useState, useEffect, useContext } from "react";
import drop from "../../assets/images/drop.svg";
import { ipcRenderer } from "electron";
import { ListContext } from "../context/ListContext";

const Start = (props) => {
    const [list, setList] = useContext(ListContext);
    const [redir, setRedir] = useState(false);

    return (
        <div
            className="start"
            onDrop={() => {
                setRedir(<Redirect to="/list" />);
            }}>
            <div className="start-drop">
                <img src={drop} draggable="false" alt="" />
                <p>Drop files or folders here to minify.</p>
            </div>
            {redir}
        </div>
    );
};

export default Start;

这是我使用电子打包器打包的 package.json 的一部分:

"scripts": {

        ...

        "package": "yarn run build",
        "postpackage": "electron-packager ./ --out=./release --icon=assets/icons/mac.icns"
    },

标签: svgelectronelectron-packager

解决方案


更新:我的 webpack 配置中有一个额外的 svg 加载器,它似乎取消了我的 fileloader svg 规则。现在都在工作!


推荐阅读