在 ASAR 中找不到 PNG 文件答案

【问题标题】：PNG files not found in ASAR在 ASAR 中找不到 PNG 文件
【发布时间】：2018-09-11 21:12:57
【问题描述】：

我有一个 Electron (1.7.10) 应用程序报告它在我的 ASAR 中找不到 7 个 PNG 文件中的 5 个。所有 7 个 PNG 都在同一个文件夹中，其中 2 个可以正常显示在屏幕上。其他 5 个报告 net::ERR_FILE_NOT_FOUND。

img 标签的所有 src 属性都是动态生成的并使用相对路径 (assets/images/MyImage.png)。如果我提取 ASAR，我可以在正确的文件夹中看到文件（由 src 属性引用）。

如果我使用控制台将浏览器的位置设置为其中一张图片 (document.location.href = "file:///path/to/app.asar/dist/assets/images/MyImage.png")，我会得到相同的结果 - 7 个中有 2 个显示正常。

在打包我的应用程序（使用电子生成器）之前，所有图像都正确显示。

【问题讨论】：

我注意到您的图像名称中有大写字母。您是否有可能在 Windows 上开发（不区分大小写）？该软件包独立于平台，因此区分大小写。只是值得检查。
好点。不是这里的问题，但无论如何要解决一些问题。

标签： electron electron-builder asar

【解决方案1】：

让我猜猜，你正在使用 react-router 和 BrowserRouter 构建一个 react SPA？

如果是这样，请改用 HashRouter。 Electron 默认不使用 SPA 的路由，因为一个 SPA 的路由会改变，但是资源路径总是相对于 index.html。

【讨论】：

没有。这就是 Angular。此外，7 张图片中有 2 张可以正常工作

【解决方案2】：

我没有评估其他答案，但对于我的特殊情况，一个非常有效的解决方案。我不相信这是有据可查的，所以人们仍然遇到这个问题可能是相当普遍的。对于我的详细信息，相关问题和解决方案已确定为here。

要解决此问题，请将<base href='./' /> 添加到 index.html（或托管 SPA 的任何起始 html 文件）。这是我的一个完整示例：

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>

【讨论】：

【解决方案3】：

const path = require('path');

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

【讨论】：

谢谢，但“找到”图像不是问题。 7 个中的 2 个工作得很好。问题是这些文件（尽管在 ASAR 中）似乎不想被“拉出”并显示。
这就是它使用 __dirname 的原因。 __dirname 在 asar 之前和之后的值不同。
谢谢，但这不是路径问题。所有路径都是正确的，遵循相同的模式，并且 7 个中的 2 个有效。