如何使用Vue访问Electron应用程序中的本地图像

Question

我有一个电子应用程序，使用Vue的用户界面。该应用程序从服务器下载压缩的数据文件。这些文件包含压缩的HTML。应用程序解压并显示HTML。这一切都运行得很好。

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

我没有列出我试着放这些图片的几十个地方，只要说无论我把图片放在哪里，我似乎都无法从应用程序中访问它们。我得到一个404错误，通常会出现一条消息，告诉我应用程序不能引用本地资源。

关于应用程序应该将这些图像存储在哪里，以及如何从img标签引用它们，有什么建议吗？

我有一个相关的问题，我可以从网络上参考图片，但我更喜欢下载并在本地缓存，这样应用程序就可以在没有互联网连接的情况下显示它们。我觉得如果我能解决其中一个问题，我就能解决这两个问题。

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