Question

我正在使用电子打包程序打包我的应用程序，但是与开发版本相比，生产版本中没有显示SVG。

构建文件包含SVG，但是仍然无法在我的产品构建中显示它们。我只是直接导入SVG并将其显示为。但是，非SVG图像似乎可以正常工作。

Here's a picture of the two side-by-side.为什么会发生这种情况？

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

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"
    },

Answer 1

更新：我的webpack配置中有一个额外的svg加载器，似乎正在取消我的fileloader svg规则。现在一切正常！

为什么我打包的Electron应用程序不显示SVG？

1 个答案: