Electron + React: SVG Loading Issue

Question

I have an issue with my react-application when I build it with electron-builder.

I just want to show an application logo with either dark or light font-colour depending on the currently selected theme. For that, I created 2 separate SVG's (dark and light).

The problem

• If I start the react-app with react-scripts and electron ., my SVG Icon gets rendered (everything works as expected).
• If I create a full electron build of the react-app and afterwards start the build, the icon only appears for the first render.
• If the screen gets rerendered, the SVG image is not visible.

I also looked into the dev-inspector of electron and the src property for the image is exactly the same as for the first render.

The imports of my 2 logos:

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

The img component:

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

The tag in the compiled app:

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

Logo not working after second render

Unpackaged app.asar

This is my first question, so if you need any further information, feel free to ask. Thanks

Answer 1

I was able to fix this by adding <base href="./" /> to my index.html file.