Electron + React: SVG 加载问题

Question

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

我想展示一个应用程序徽标，根据当前选择的主题色，可以是深色或浅色字体颜色。为此，我创建了两个分开的SVG（深色和浅色）。

问题

• 如果我使用react-scripts和electron .启动react-app，则会呈现我的SVG图标（一切正常运行）。
• 如果我创建完整的electron build并随后启动构建，则该图标仅出现在第一次渲染时。
• 如果屏幕被重新渲染，则SVG图像不可见。

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

我的两个徽标的导入如下：

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

组件：

<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在第二次渲染后无法正常工作

未封装的app.asar

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

- Eternity

---

对于开发模式，这个SVG将被正确地渲染。 - tpikachu

但是在生产模式下，SVG文件没有放置在正确的位置。 - tpikachu

正如您所看到的，在构建后，您的应用程序正在win-unpacked文件夹中运行，但在win-unpacked文件夹中没有静态文件夹。 - tpikachu

尝试将"./statc/...."更改为"./resource/destfolder/build/static/..." - tpikachu

针对此问题，@Eternity 是否有解决方法？我也遇到了这个问题。第一次渲染很好，图片显示得很好；第二次渲染，图片就消失了。似乎是SVG和PNG文件都有这个问题。有些PNG文件总是渲染，而另一些则从不渲染。 - Jras

Answer 1

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

- Jras