使用electron和electron-forge加载本地磁盘资源img的问题

最近在学习使用 electron 进行桌面开发一款图片压缩的软件。遇到了加载本地磁盘文件的问题。记录一下其解决方案。

使用 electron 加载本地磁盘文件

• 第一种方法 设置webPreferences.webSecurity值为false

使用这个方法就是设置Chromium的启动安全参数，允许访问本地资源文件。由于Chromium是不允许在远程地址访问本地资源。只有本地资源访问本地资源，那么问题来了，使用 electron 启动的项目怎么设置访问本地路径资源呢？ 代码配置如下

// main.jsconst { app, BrowserWindow } = require("electron");const createWindow = () => {  const mainWindow = new BrowserWindow({    width: 1024,    height: 600,    webPreferences: {      // 设置安全参数      webSecurity: false, // false 之后就可以访问 本地资源文件了    },  });  mainWindow.loadURL("http://localhost:3000"); // 本地服务链接  mainWindow.webContents.openDevTools();};app.on("ready", createWindow);app.on("window-all-closed", () => {  if (process.platform !== "darwin") {    app.quit();  }});app.on("activate", () => {  if (BrowserWindow.getAllWindows().length === 0) {    createWindow();  }});

<!-- localhost:3000 --><div>  <img src="D:/xxxx/xxx.png" />  访问本地图片地址</div>

这样就可以在electron里正常访问本地资源了。

• 第二种方法，注册自定义协议，来绕过Chromium安全检查。

// main.jsconst { app, BrowserWindow, protocol } = require("electron");const createWindow = () => {  const mainWindow = new BrowserWindow({    width: 1024,    height: 600,  });  mainWindow.loadURL("http://localhost:3000"); // 本地服务链接  mainWindow.webContents.openDevTools();};app.on("ready", createWindow);app.whenReady().then(() => {  // 注册协议 aaaa 协议名字无所谓 自定义即可  protocol.registerFileProtocol("aaaa", (request, callback) => {    const url = request.url.substr(7);    // 防止url 解析不正常 使用 decodeURI    callback(decodeURI(path.normalize(url)));  });});app.on("window-all-closed", () => {  if (process.platform !== "darwin") {    app.quit();  }});app.on("activate", () => {  if (BrowserWindow.getAllWindows().length === 0) {    createWindow();  }});

<!-- localhost:3000 --><div>  <img src="aaaa:///D:/xxxx/xxx.png" />  根据自定义协议名前缀 访问本地图片地址</div>

使用 electron-forge 加载本地磁盘文件

electron-forge是 electron 的脚手架，类似于，react 的create-react-app或者 vue 的vue-cli,所有配置文件都是已经配置好的，根据需求在往上添加就可以用了。如果加载本地磁盘资源用以上办法还是不太行的。需要再加上一个配置才行。

在forge.config.js或者package.json 设置plugins项，如下

{  "plugins": [    [      "@electron-forge/plugin-webpack",      {        "devContentSecurityPolicy": "`default-src 'self' 'unsafe-inline' data:;`", //设置 devContentSecurityPolicy 就可以访问本地资源了        "mainConfig": "./webpack.main.config.js",        "renderer": {          "config": "./webpack.renderer.config.js",          "entryPoints": [            {              "html": "./src/index.html",              "js": "./src/renderer.tsx",              "name": "main_window"            }          ]        }      }    ]  ]}

配置之后，再使用 上面的两种方法 其中一种就可以解决 手脚架加载本地磁盘文件的问题了。

下面贴上我当时开发的版本信息。

PS D:> node -v# v14.18.2PS D:> npm -v# 6.14.15

{  "@electron-forge/cli": "^6.0.0-beta.61",  "electron": "16.0.5"}