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

我希望我的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 应用程序可以显示位于应用程序目录之外的用户本地镜像的唯一方法

P.S.这是一个Electron-Vue项目。它使用webpack。

最佳答案

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

这意味着，仅在处于开发模式并从Webpack开发服务器运行时，才需要禁用webSecurity。

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