在 ASAR 中找不到 PNG 文件 [英] PNG files not found in ASAR
问题描述
我有一个 Electron (1.7.10) 应用程序报告它在我的 ASAR 中找不到 7 个 PNG 文件中的 5 个.所有 7 个 PNG 都在同一个文件夹中，其中 2 个可以正常显示在屏幕上.其他 5 个报告 net::ERR_FILE_NOT_FOUND.
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.
img 标签的所有 src 属性都是动态生成的并使用相对路径 (assets/images/MyImage.png).如果我提取 ASAR，我可以在正确的文件夹中看到文件(由 src 属性引用).
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).
如果我使用控制台将浏览器的位置设置为其中一个图像 (document.location.href = "file:///path/to/app.asar/dist/assets/images/MyImage.png") 我得到相同的结果 - 7 个中的 2 个显示 OK.
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 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.
要解决此问题，请将 <base href='./'/> 添加到 index.html(或托管 SPA 的任何起始 html 文件).这是我的一个完整示例:
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>
这篇关于在 ASAR 中找不到 PNG 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
