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

Question

我有一个使用Vue作为其UI的电子应用程序。该应用程序从服务器下载压缩数据文件。这些文件包含压缩的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