Загрузка изображений с локального диска - PullRequest
Новая
       51

Загрузка изображений с локального диска

0 голосов
/ 13 мая 2018

В настоящее время я получаю в свои руки электрон с помощью электронно-графического шаблона.

Моя цель - показать все изображения из указанной папки в приложении (процесс рендеринга). 

<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>

Запуск этого кода приводит к появлению следующего сообщения об ошибке: error Все работает, если я использую закомментированную строку с изображениями в кодировке base64, что очень очень медленно (строка 8).

Каково правильное решение, чтобы просто показать эти изображения?

1 Ответ

0 голосов
/ 14 мая 2018

Отключение веб-безопасности в моем основном процессе помогло. 

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