javascript - Electron + react : SVG Loading Issue

Question

当我使用 electron-builder 构建我的 react 应用程序时，我遇到了问题。

我只想根据当前选择的主题使用深色或浅色字体显示应用程序 Logo 。为此，我创建了 2 个独立的 SVG(深色和浅色)。

问题

• 如果我使用 react-scripts 和 electron. 启动 react-app，我的 SVG 图标就会被渲染(一切都按预期工作)。
• 如果我创建了 react-app 的完整 electron 构建，然后开始构建，该图标只会出现第一次渲染。
• 如果屏幕重新呈现，则 SVG 图像不可见。

我还查看了 electron 的开发检查器，图像的 src 属性与第一次渲染完全相同。

我的 2 个 Logo 的导入:

import LightLogo from "./images/lightLogo.svg"
import DarkLogo from "./images/darkLogo.svg"

img 组件:

<img
     className={styles.logo}
     src={props.theme === Themes.DARK.name ? LightLogo : DarkLogo}
     width={"40%"}
     alt={"Logo"}
/>

编译后的应用中的标签:

<img class="jss742" src="./static/media/darkLogo.667e0ffc.svg" width="40%" alt="Logo">

Logo not working after second render

Unpackaged app.asar

这是我的第一个问题，所以如果您需要任何进一步的信息，请随时询问。谢谢

Answer 1

我可以通过添加 <base href="./" /> 来解决这个问题到我的 index.html 文件。