来自本地文件系统的 Electron JS 图像

Answer 1

我正在使用电子反应

“反应”：“^18.2.0”， “电子”：“^29.2.0”

app 和我想从本地驱动器渲染图像。由于电子的安全规则，这不是一件容易的事。在 Electron protocol.registerFileProtocol(...) 贬值之后，我花了几个小时试图弄清楚如何使用 protocol.handle(...)。

// Deprecated in Electron 25
protocol.registerFileProtocol('some-protocol', () => {
  callback({ filePath: '/path/to/my/file' })
})

// Replace with
protocol.handle('some-protocol', () => {
  return net.fetch('file:///path/to/my/file')
})

电子文档

我设法像这样解决：

main.js

app.whenReady().then(() => {
  protocol.handle('my-protocol', async (request, callback) => {
    const filePath = request.url.replace(`my-protocol://`, 'file://');
    return net.fetch(filePath);
  });

  createWindow();
});

MyReactComponent.jsx

...
<div>
  <img
     src={`my-protocol://${imageLocalPath}`}
     alt='my-alt'
     className='my-classname'
  />
</div>
...

一切顺利。 我希望我有所帮助！