PNG files not found in ASAR

Question

I have an Electron (1.7.10) application that is reporting it can't find 5 of 7 PNG files in my ASAR. All 7 PNGs are in the same folder, and 2 of them are displayed on screen fine. The other 5 report net::ERR_FILE_NOT_FOUND.

All src attributes for the img tags are dynamically generated and use relative paths (assets/images/MyImage.png). If I extract the ASAR, I can see the files in there, in the correct folder (as referenced by the src attribute).

If I use the console to set the location of my browser to one of the images (document.location.href = "file:///path/to/app.asar/dist/assets/images/MyImage.png") I get the same results - 2 of 7 show OK.

Before packaging my application (with electron-builder), all images show correctly.

I notice that you have Uppercase in your image name. Is it possible you are developing on Windows (case-insensitive)? The package is platform independent, therefore case-sensitive. Just something worth checking. — CUGreen, Apr 03 '18 at 00:07
Good point. Not the problem here, but something to fix anyway. — TimTheEnchanter, Apr 06 '18 at 14:54
I also have similar issue and use angular.. In my case only one png file doesn't get copied during electron-forge make and this png file is the only png file that is png 24. — Daniel Shin, Dec 17 '22 at 03:00

score 1 · Answer 1 · answered Jun 10 '19 at 13:52

1

Let me guess, you are building a react SPA using react-router, and BrowserRouter?

If so, use HashRouter instead. Electron does not work with SPA's route by default, because a SPA route changes, but the resource path is always relative to index.html.

answered Jun 10 '19 at 13:52

Alex Tong

53
1
6

No. This was Angular. Also, 2 of 7 images work fine – TimTheEnchanter Sep 21 '21 at 15:09

score 1 · Answer 2 · answered Sep 21 '21 at 14:57

I haven't evaluated the other answers, but for my particular case, an extremely solution worked. I don't believe this is well documented, so it might be fairly common for people to still encounter this issue. For my particulars, the relevant problem and solution were identified here.

To address, add <base href='./' /> to the index.html (or whatever your starting html file is that hosts your SPA). This is a complete example of mine:

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <base href="./" />
        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta
            name="description"
            content="Web site created using create-react-app"
        />
        <meta
            http-equiv="Content-Security-Policy"
            content="script-src 'Self' 'unsafe-inline';"
        />
        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
        <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
        <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->

        <title>React App</title>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    </body>
</html>

score 0 · Answer 3 · answered Apr 06 '18 at 05:32

0

const path = require('path');

path.join(__dirname, 'assets/images/MyImage.png');

answered Apr 06 '18 at 05:32

KBIIX

873
9
14

Thanks, but it isn't a problem "finding" the image. 2 of 7 work just fine. The problem is that those files (although in the ASAR) don't seem to wanted to be "pulled out" and displayed. – TimTheEnchanter Apr 06 '18 at 14:54
That's why it using __dirname. __dirname value is different before asar and after. – KBIIX Jun 27 '18 at 01:32
Thanks, but it's not a pathing issue. All paths are correct, follow the same pattern, and 2 of 7 work. – TimTheEnchanter Jun 27 '18 at 11:16

PNG files not found in ASAR

3 Answers3

Linked