title: Load images from local disk
body: <p>I currently get my hands on electron with the electron-vue boilerplate.</p>
  
  <p>My goal is to show all images from a given folder in the application (renderer process).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      &lt;button @click="selectSourceDir()"&gt;Quellverzeichnis&lt;/button&gt;
      Aktuell: {{sourcePath}}
      &lt;button @click="scan()"&gt;Aktualisieren&lt;/button&gt;
      &lt;ul&gt;
        &lt;li v-for="image in images"&gt;
          &lt;!--&lt;img v-bind:src="'data:image/jpg;base64,' + image.base64"&gt;--&gt;
          &lt;img v-bind:src="'file://' + image.path"&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    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) =&gt; {
            this.sourcePath = directory;         
          });        
        }
      },
      created(){
        this.scan();
      } 
    }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
    
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Running this code results in the following error message: <a href="https://i.stack.imgur.com/agMVC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/agMVC.png" alt="error"></a>
  Everything works if I use the commented out line with base64 encoded images which is very very slow (line 8).</p>
  
  <p>What is the proper solution to simply show these images?</p>