“不允许加载本地资源”与电子应用程序中的文件图像 URL答案

【问题标题】："Not allowed to load local resource" with file image URL in Electron app“不允许加载本地资源”与电子应用程序中的文件图像 URL
【发布时间】：2021-02-10 23:38:45
【问题描述】：

我正在开发一个使用 Markdown 的 Electron 笔记应用程序。目前，我正在将图像插入到笔记中（使用 Markdown 语法）。

插入图片时，我的主进程将图片复制到notes目录中，然后返回图片文件的file:/// URL。但是，当我尝试渲染图像时，它不会加载 - 我收到错误 Not allowed to load local resource: file:///Users/joe/notes/images/foo.jpg。

有没有办法可以配置 Electron 以允许这些本地图像 URL？

【问题讨论】：

标签： electron

【解决方案1】：

你需要注册一个文件协议来移除file:///前缀。

import { protocol } from "electron";

app.whenReady().then(() => {
  protocol.registerFileProtocol('file', (request, callback) => {
    const pathname = decodeURI(request.url.replace('file:///', ''));
    callback(pathname);
  });
});

https://github.com/electron/electron/issues/23757#issuecomment-640146333

【讨论】：

【解决方案2】：

选项 1

关闭网络安全

mainWindow = new BrowserWindow({
  height: 563,
  useContentSize: true,
  width: 1000,
  webPreferences: {
    webSecurity: false
}
});

选项 2

您可以创建自己的协议like this answer

还有回答这个问题的user

【讨论】：

在任何情况下关闭安全都不应该是一个答案