webpack - 在 Electron 窗口中禁用 webSecurity 是显示本地镜像的唯一方法吗？

Question

我希望我的 Electron 应用程序显示本地镜像:

<!-- file.path has value of C:/Users/name/Desktop/1.png -->
<img :src="file.path">

但是当我使用图像标签时，我收到此错误: Not allowed to load local resource: file:///C:/Users/name/Desktop/1.png题:
据我了解，为了能够加载本地镜像，我必须通过添加 webPreferences: { webSecurity: false } 来关闭 webSecurity

这样做安全吗？禁用名为 webSecurity 的东西在主窗口上听起来不安全

这真的是 Electron 应用程序可以显示位于应用程序目录之外的用户本地镜像的唯一方式吗？

附注这是一个 Electron-Vue 项目。它使用 webpack。

Answer 1

Electron 不会加载 file:// urls 从非文件 URL 运行页面(在您的情况下为 http://localhost:9080)。

这意味着您只需要禁用 webSecurity当您处于开发模式并从 Webpack 开发服务器运行时。

在生产中您可以留下 webSecurity从文件加载时启用:file://${__dirname}/index.html