javascript - Electron + React：SVG 加载问题

Question

当我使用电子构建器构建反应应用程序时，我遇到了问题。

我只想根据当前选择的主题显示带有深色或浅色字体颜色的应用程序徽标。为此，我创建了 2 个单独的 SVG（深色和浅色）。

问题

• react-scripts如果我用and启动 react-app electron .，我的 SVG 图标会被渲染（一切都按预期工作）。
• 如果我创建了 react-app 的完整电子版本，然后开始构建，则该图标仅在第一次渲染时出现。
• 如果屏幕重新渲染，则 SVG 图像不可见。

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

我的 2 个徽标的导入：

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

第二次渲染后徽标不起作用

未打包的 app.asar

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

标签： javascriptreactjssvgelectronelectron-builder

Answer 1

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