在 ASAR 中找不到 PNG 文件
Posted
技术标签:
【中文标题】在 ASAR 中找不到 PNG 文件【英文标题】:PNG files not found in ASAR 【发布时间】: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 上开发(不区分大小写)?该软件包独立于平台,因此区分大小写。只是值得检查。 好点。不是这里的问题,但无论如何要解决一些问题。 【参考方案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 个有效。以上是关于在 ASAR 中找不到 PNG 文件的主要内容,如果未能解决你的问题,请参考以下文章
Django 在根文件夹中找不到“/media/image.png”
将 Electron 应用程序打包到 ASAR 中会导致找不到模块错误
UnsatisfiedLinkError 在 Android 4.4 libDevil 中找不到符号“png_set_longjmp_fn”
错误:找不到模块‘/opt/Ferdi/resources/app.asar/node_modules/@meetfranz/theme/lib/index.js’