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

【问题标题】：Electron JS Images from Local File System来自本地文件系统的 Electron JS 图像
【发布时间】：2018-10-20 16:45:08
【问题描述】：

我是电子新手，并试图从本地文件系统加载图像以将其显示在屏幕上。因此，当我这样做时，来自远程 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

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

【问题讨论】：

您是否收到有关找不到图像的错误消息？如果你把/换成`\`
抱歉，我刚刚更新了我的问题以包含错误和屏幕截图。
如果你想在渲染器进程中加载本地资源，我认为你需要禁用网络安全，正如这里提到的github.com/electron/electron/issues/5107。
@RohnJohn 是的，我确实遵循了该文档，但禁用网络安全可能会带来巨大的安全风险。我是通过 readFileSync base64 完成的，但它只会破坏大分辨率文件的性能。我想知道其他人是怎么做到的？
如何从本地文件系统加载图像并进行渲染？

标签： electron

【解决方案1】：

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

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

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

如果您甚至在生产环境中也从远程源加载 html，最好且安全的方法是将其上传到您的服务器上的某个位置并加载。

【讨论】：

这是有道理的，现在我使用相对路径来避免开发中的问题。谢谢。

【解决方案2】：

方法 1. 使用方案 'file' 实现 protocol.interceptFileProtocol。

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

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

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

详述方法一：

protocol.interceptFileProtocol('resource', (req: ProtocolRequest, callback: (filePath: string) => void) => {

            if (someCondition) {

                const url = GetSomeFilePath(req.url);
                callback(url);

            }
            else {                

                callback(req.url);

            }            

        });

【讨论】：

我对方法 2 感兴趣，但这在大文件的上下文中是否也有效，即从磁盘加载本地视频？
试图阅读方法 1，但最近没有多少好的例子。
@joeyj 方法 2 可能不适合视频，因为它将整个文件转换为 base64 并且需要流式传输视频。