如何将图像从Electron进程加载到Angular应用？

Question

我正在尝试执行以下操作：

• 使用dialog用Electron上载图像，并获取一系列路径url。

• 通过使用fs读取文件并使用base64

，使用地图替换数组中的所有项目

• 使用电子event的{​​{1}}自变量将数组发送到电子应用中的角度应用

• 使用服务并且可以观察到角度，使用dialog

• 订阅可观察到的组件，并通过分配给变量来使数组可公开获得（对于html指令）。

• 使用html指令和IpcRenderer列出所有带有img标签的图像，并带有html指令*ngFor循环遍历具有src网址的变量，并将其用作{{ 1}}。

我尝试过的事情：

此解决方案应该可以根据我所阅读的内容进行工作，但不能，我也不知道为什么。

电子应用

base64

应用程序组件

src

html

ipcMain.on('showOpenDialog', (event) => {

    const dialogOptions = {
        filters: [{
            name: 'images',
            extensions: ['jpg', 'png']
        }]
    }

    dialog.showOpenDialog(dialogOptions, files => {
        let fileList = files.map(file => fs.readFileSync(file, 'base64'));

        event.sender.send('files', fileList);
    });

});

但是在控制台中出现GET错误。尽管它确实将base64网址放入了src中，如果我将其复制并放入在线base64阅读器中，它会弹出正确的图像。