Electron + React：SVG 加载问题答案

【问题标题】：Electron + React: SVG Loading IssueElectron + React：SVG 加载问题
【发布时间】：2020-06-05 00:52:23
【问题描述】：

我在使用 electron-builder 构建 react-application 时遇到问题。

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

问题

我还查看了 electron 的 dev-inspector，图像的 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">

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

【问题讨论】：

对于开发模式，这个SVG会正确渲染
但是在生产模式下，正确的位置没有 SVG 文件
如您所见，构建后您的应用程序在 win-unpacked 文件夹中运行，但 win-unpacked 文件夹中没有静态文件夹
尝试将“./statc/....”改为“./resource/destfolder/build/static/...”
跟进此事，@Eternity 是否有任何解决方案。我也遇到过这个问题，第一次渲染效果很好，图像显示很好，第二次渲染图像消失了。似乎是 svg 和 png 文件。一些 png 文件始终呈现，而另一些则从不呈现。

【解决方案1】：

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

【讨论】：