images broken after building with electron-builder

[lduros]

Hello,
This may not be directly an issue with this package, but whenever I use electron-builder and build a standalone electron app (dmg file, ...) everything works great for the React piece inside Electron except for the images. I can see them both in my public directory as well as in the build/ directory. However after debugging the standalone electron app, it's attempting to load the image from

file:///my-img-folder/my-img.png

while it should probably be something like this as a prod electron, I'm assuming:

file:///Applications/m-yapp.app/Contents/Resources/app.asar/build/my-img-folder/my-img.png

Has anyone seen this behavior as well? I'm thinking a variable in .env might be the solution here, but I'm not sure what it should be.

[csepulv]

I don't know how to fix this. In a quick search, I found this electron-react-boilerplate/electron-react-boilerplate#712, which describes a fix via a webpack config change. But that would require eject of the app.

I will see if i find anything else.

[lduros]

Thanks for looking into it, I'll update here if I can find a solution. I guess I could use hardcoded data-uris meanwhile for images. Also, it might be a possibility to eject only within the context of building the app with electron-builder.

[csepulv]

facebook/create-react-app#94
and
facebook/create-react-app#165 might also help

[thalessd]

If your using React, Electron and react-router-dom, change your react-router-dom "BrowserRouter" to "HashRouter".

[kylelynchkurzawa]

@thalessd Thank you so much!! The switch from BrowserRouter to HashRouter solved my image issues too!

[claytonfbell]

If your using React, Electron and react-router-dom, change your react-router-dom "BrowserRouter" to "HashRouter".

This probably saved me sooo much time, thank you!

[RafaelDamiani]

If your using React, Electron and react-router-dom, change your react-router-dom "BrowserRouter" to "HashRouter".

Amazing man, thank u so much!