Load images from local disk

Question

I currently get my hands on electron with the electron-vue boilerplate.

My goal is to show all images from a given folder in the application (renderer process).

<template>
  <div>
    <button @click="selectSourceDir()">Quellverzeichnis</button>
    Aktuell: {{sourcePath}}
    <button @click="scan()">Aktualisieren</button>
    <ul>
      <li v-for="image in images">
        <!--<img v-bind:src="'data:image/jpg;base64,' + image.base64">-->
        <img v-bind:src="'file://' + image.path">
      </li>
    </ul>
    
  </div>
</template>

<script>
  import ImageFile from './ImageDispatchPage/ImageFile';
  import fs from 'fs';
  import { ipcRenderer as ipc } from 'electron';
  import path from 'path';

  export default {
    name: 'image-dispatch-page',
    components: { ImageFile },
    data () {
      return{
        images: [],
        sourcePath: null,
      }  
    },
    methods: {     
      scan(){        
        // If path is not set do nothing
        if(!this.sourcePath){
          return;
        }
        // Iterate over all files in directory
        let files = fs.readdirSync(this.sourcePath);
        const regex = /.jpe?g$/gmi;        
        for (let file of files){          
          // Ignore non jpg files                    
          if(!file.match(regex)){
            continue;                                    
          }          
          let image = {};
          image.name = file;
          image.path = path.join(this.sourcePath, file);
          image.base64 = new Buffer(fs.readFileSync(image.path)).toString('base64');       
          this.images.push(image);
        }        
      },
      selectSourceDir(){
        ipc.send('open-directory-dialog');        
        ipc.on('selected-directory', (event, directory) => {
          this.sourcePath = directory;         
        });        
      }
    },
    created(){
      this.scan();
    } 
  }
</script>

<style scoped>
  
</style>

Running this code results in the following error message: Everything works if I use the commented out line with base64 encoded images which is very very slow (line 8).

What is the proper solution to simply show these images?

Use the relative file path to the image, not a URL (I did not downvote) — Randy Casburn, May 13 '18 at 20:36
I tried to determine the relative path for the image with app.getAppPath() and nodes path.relative (not sure if this is what you meant) - which gave me the relative path but the error message showing in the console remains the same: "Not allowed to load local resoucre" — lasagne, May 14 '18 at 05:09
Turn web security off: `"web-preferences": { "web-security": false }` — Randy Casburn, May 14 '18 at 05:47
Thank you Randy! A quick look at the docs revealed a different notation with the current version. Are there any security concerns with this setting? — lasagne, May 14 '18 at 08:55
Security depends upon what you are doing with the app. If you are only loading resources that you control as part of your app, then no, there isn't really a security concern. Otherwise there can be. — Randy Casburn, May 14 '18 at 13:13
"safer" way here: https://stackoverflow.com/questions/49393845/electron-load-remote-url-and-load-local-file Documentation: https://github.com/electron/electron/blob/master/docs/api/protocol.md — Xander Luciano, Jun 06 '18 at 01:11
Unfortunately this results in my case also in the above error. — lasagne, Jun 09 '18 at 09:27

score 4 · Accepted Answer · answered May 14 '18 at 08:53

4

Turning off web security in my main process did the trick.

mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    webPreferences: {
        webSecurity: false
    }
});

answered May 14 '18 at 08:53

lasagne

643
2
10
23

Adding a note here that you should think hard about whether you really want to disable this option: https://www.electronjs.org/docs/tutorial/security#6-do-not-disable-websecurity "Disabling webSecurity will disable the same-origin policy and set allowRunningInsecureContent property to true. In other words, it allows the execution of insecure code from different domains." – rubiii Sep 29 '21 at 21:58

Load images from local disk

1 Answers1