如何使用 Vue 在 Electron 应用中访问本地图像

Question

我有一个使用 Vue 作为其 UI 的 Electron 应用程序。该应用程序从服务器下载压缩数据文件。这些文件包含压缩的 HTML。该应用程序解压缩并显示 HTML。一切正常。

HTML 可能包含引用图像的 img 标签，这些图像也在下载的文件中被压缩。我提取并解压缩这些图像，但随后需要 a) 将它们放在应用程序可以看到它们的地方，b) 构造一个正确引用这些图像的 img 标签。

与其列出我尝试放置这些图像的几十个地方，我只想说无论我将图像放在哪里，我似乎都无法从应用程序中访问它们。我收到一个 404 错误，通常是一条消息说应用程序无法引用本地资源。

关于应用应该在哪里存储这些图像，以及如何从 img 标签中引用它们的任何建议？

我对可以从 Web 引用的图像有一个相关的问题，但我希望在本地下载和缓存，以便应用程序可以在没有 Internet 连接时显示它们。我觉得如果我能解决其中一个问题，我就能同时解决它们。

Answer 1

以下设置对我有用...

.
├── dist
│   ├── css
│   │   └── app.6cb8b97a.css
│   ├── img
│   │   └── icon.1ba2ae71.png
│   ├── index.html
│   └── js
│       ├── app.08f128b0.js
│       ├── app.08f128b0.js.map
│       ├── chunk-vendors.e396765f.js
│       └── chunk-vendors.e396765f.js.map
├── electron.js
├── package.json
├── package-lock.json
├── public
│   ├── favicon.ico
│   └── index.html
└── src
    ├── App.vue
    ├── components
    │   ├── _breakpoint.scss
    │   └── RoundList.vue
    ├── img
    │   ├── bullet.svg
    │   └── icon.png
    └── index.js

vue.config.js：

const path = require("path");

module.exports = {
  outputDir: path.resolve(__dirname, "./basic_app/dist"),
  publicPath: './'
};

package.json 的一部分

"scripts": {
  "build:vue": "vue-cli-service build",
  "serve:electron": "electron .",
  "serve": "concurrently \"yarn build:vue\" \"yarn serve:electron\"",
  "build:electron": ""
},

输出：https://i.stack.imgur.com/nKK7y.png