本地文件系统中的电子JS图像

Question

我是电子新手并试图从本地文件系统加载图像以在屏幕上显示它。因此，当我执行

时，来自远程URL的图像正常工作

<img src='https://example.com/image.jpg' />

但是当我尝试在渲染过程中从本地文件系统加载相同的图像时，它不起作用

<img src='file:///C:/tmp/image.jpg' />

未呈现。

这是我得到的错误：

> Not allowed to load local resource:
> file:///C:/tmp/nW4jY0CHsepy08J9CkF1u3CJVfi4Yvzl_screenshot.png
> dashboard:1 Not allowed to load local resource:
> file:///C:/tmp/TOyUYWnJK7VS9wWeyABhdgCNmp38FyHt_screenshot.png

是否需要进行任何配置以允许电子从本地文件系统渲染图像或者我完全错了？

Answer 1

默认情况下，Electron只有在出于安全原因使用file://协议从本地源加载html文件时，才允许渲染进程访问本地资源。

如果您从任何http://或https://协议加载html，甚至从webpack-dev-server等本地服务器加载，则禁用对本地资源的访问。

如果仅在开发期间从本地服务器加载html页面并切换到生产中的本地html文件，则可以在开发期间禁用websecurity，并注意在生产中启用它。

如果您从生产中加载来自远程源的html，最好和最安全的方法是将其上传到服务器上并加载它。

Answer 2

方法1。。使用方案“文件”实现protocol.interceptFileProtocol。

使用文件的目录路径调用回调

方法2。使用“ file：///”上的过滤器实现session.defaultSession.webRequest.onBeforeRequest。

在回调中，通过node加载文件，转换为Base64并返回。