Electron渲染进程加载本地图片失败问题求助

嘿，我刚入门Electron的时候也踩过一模一样的坑！这个报错是因为Electron默认的安全策略限制了直接加载file://协议的本地资源，别慌，咱们分两种场景来解决：

一、开发环境快速验证（临时方案） #

如果只是开发阶段想快速看到效果，可以在创建BrowserWindow的时候关闭web安全限制——注意，这个方法只适合开发，绝对不能用在生产环境，会带来安全风险：

const { BrowserWindow } = require('electron')

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    webSecurity: false // 关闭同源策略限制，允许加载本地file资源
  }
})

设置完之后，你原来的<img src='file:///C:/tmp/image.jpg' />就能正常显示了。

二、生产环境安全方案（推荐） #

上线应用的话，绝对不能关闭webSecurity，咱们可以用Electron的protocol模块注册一个自定义协议，安全地映射本地资源：

步骤1：在主进程注册自定义协议 #

在你的主进程文件（比如main.js）里，当app就绪后注册一个自定义协议（比如app://），指向你的本地资源目录：

const { app, protocol } = require('electron')
const path = require('path')

app.whenReady().then(() => {
  // 注册自定义协议，用来加载本地资源
  protocol.registerFileProtocol('app', (request, callback) => {
    // 去掉协议前缀，拿到文件名
    const resourceName = request.url.replace('app:///', '')
    // 拼接本地资源的绝对路径，这里假设图片放在项目的`images`文件夹下
    const filePath = path.join(__dirname, 'images', resourceName)
    callback({ path: filePath })
  })
})

步骤2：在渲染进程使用自定义协议 #

现在你在html里就可以用这个自定义协议来加载图片了：

<img src="app:///image.jpg" />

这样既避开了file://的安全限制，又能安全地加载本地资源，完全符合生产环境的要求。

其他小技巧 #

如果你的图片是和应用打包在一起的资源，也可以直接用相对路径，比如把图片放在渲染进程的静态资源目录里，然后写：

<img src="./images/image.jpg" />

这种方式更简单，前提是资源路径和html文件的相对关系是正确的。

内容的提问来源于stack exchange，提问作者Aftab Naveed