默认情况下，file://协议是禁用的。因此，您必须 * 注册您自己的协议 *。感谢nicoNx的回答，其中包括电子协议文档的链接。以下代码是从Electron文档的直接副本：https://www.electronjs.org/docs/latest/api/protocol

const { app, protocol } = require('electron')
const path = require('path')
const url = require('url')

app.whenReady().then(() => {
  protocol.registerFileProtocol('atom', (request, callback) => {
    const filePath = url.fileURLToPath('file://' + request.url.slice('atom://'.length))
    callback(filePath)
  })
})

在你的html中：

<img src="atom://[FILE_ADDRESSS]" />

如果您遇到问题，请确保将协议附加到正确的浏览器会话。您可以在电子协议文档（上面的链接）中找到有关如何管理浏览器会话的更多详细信息。还请确保在应用程序准备就绪后注册协议。

一个最小的例子来选择，读取和显示一个png图像。
渲染器进程：：：

var remote = require('electron').remote;
var fs = remote.require('fs');

  
remote.dialog.showOpenDialog(remote.getCurrentWindow(),
   {
    filters: [
      {name: 'Images', extensions: ['png']}
    ]
   }, 
   function(filepaths, bookmarks) {
     //read image (note: use async in production)
     var _img = fs.readFileSync(filepaths[0]).toString('base64');
     //example for .png
     var _out = '<img src="data:image/png;base64,' + _img + '" />';
     //render/display
     var _target = document.getElementById('image_container');
     _target.insertAdjacentHTML('beforeend', _out);

     return;
});

<div id="image_container"></div>

以下是一个解决方案，其中包含有关main进程和renderer的分离以及es6的使用的更多信息

主进程

import { ipcMain, dialog } from "electron";
import fs from 'fs';

ipcMain.on("chooseFile", (event, arg) => {
  const result = dialog.showOpenDialog({
    properties: ["openFile"],
    filters: [{ name: "Images", extensions: ["png","jpg","jpeg"] }]
  });

  result.then(({canceled, filePaths, bookmarks}) => {
    const base64 = fs.readFileSync(filePaths[0]).toString('base64');
    event.reply("chosenFile", base64);
  });
});

渲染进程

import electron from 'electron';

// trigger file prompt
electron.ipcRenderer.send('chooseFile');

// handle response
electron.ipcRenderer.on('chosenFile', (event, base64) => {
  const src = `data:image/jpg;base64,${base64}`
})

下面的https://www.electronjs.org/docs/api/protocol代码片段适用于electron 11

app.whenReady().then(() => {
  protocol.registerFileProtocol('atom', (request, callback) => {
    console.log(request.url)
    const url = request.url.substr(7)
    callback({ path: url })
  })
})

请注意不要使用通常的file://协议，而是使用自定义的'atom'或'my_whatever'协议
现在你可以通过这种方式获得图像：

<img src="atom://C:\\Users\\my_path\\myfile.png" />

但是，如果你不想在渲染端保留file协议的语法，你可以这样做：

protocol.registerFileProtocol('file', ()=>...)

现在你可以用这种方法得到一个图像

<img src="file://C:\\Users\\my_path\\myfile.png" />

但是，您必须禁用webSecurity

const mainWindow = new BrowserWindow({
webPreferences: {
  nodeIntegration : true,
  webSecurity: false
}