vue.js - How to access local images in Electron app with Vue

Question

I have an Electron app that uses Vue for its UI. The app downloads compressed data files from a server. The files contain compressed HTML. The app decompresses and display the HTML. That's all working fine.

The HTML may contain img tags that reference images that are also compressed in the downloaded file. I extract and decompress these images, but then need to a) put them somewhere that the app can see them, and b) construct an img tag that correctly references these images.

Rather than list the dozens of places I've tried to put these images, suffice to say that no matter where I put the images, I don't seem to be able to access them from the app. I get a 404 error, and usually a message saying the app can't reference local resources.

Any suggestions for where the app should store these images, and then how to reference them from img tags?

I have a related problem with images I could reference from the Web, but would prefer to download and cache locally so that the app can display them when there's no internet connection. I feel like if I can solve one of these problems, I can solve them both.

question from:https://stackoverflow.com/questions/65833336/how-to-access-local-images-in-electron-app-with-vue

Answer 1

this below setting(s) works for me...

.
├── 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: './'
};

part of package.json

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

the output: https://i.stack.imgur.com/nKK7y.png