Webpack 在Electron窗口上禁用Web安全性是显示本地图像的唯一方法吗？

我希望我的Electron应用程序显示本地图像：

但当我使用图像标记时，我会出现以下错误：

不允许加载本地资源：file:///C:/Users/name/Desktop/1.png

问题:

---

据我所知，为了能够加载本地图像，我必须通过添加

webPreferences:{webSecurity:false}

• 这样做安全吗？在主窗口上禁用名为

  webSecurity

  的东西听起来不安全

• 这真的是电子应用程序显示用户位于应用程序目录之外的本地图像的唯一方式吗

---

---

另外，这是一个Electron Vue项目。它使用webpack。

Electron从非文件URL（在您的情况下）运行页面时，不会加载

文件：//

URL

这意味着您只需要在开发模式下并从Webpack开发服务器运行时禁用

webSecurity

---

在生产环境中，您可以在从文件加载时启用

webSecurity

：

文件：//${\uuu dirname}/index.html

您正在使用Webpack吗？存在大量与Webpack相关的

不允许的
问题…@Tim是的，它使用Webpack。不知道为什么互联网上几乎没有关于它的信息，人们肯定曾经尝试过在他们的电子应用程序中显示本地图像。谷歌你的错误+电子+网页，当你打开浏览器窗口后调用
loadUrl
时，你会看到许多可能的解决方案，您正在加载本地文件路径还是
localhost
？@Tim
loadUrl
函数调用此常量：const winURL=process.env.NODE_env===='development'<代码>http://localhost:9080
：
文件：//${\uu dirname}/index.html
谢谢您的回答！这就澄清了这一点。但是如何确保仅在开发模式下禁用了
webSecurity
？我刚刚在我的index.js文件
webPreferences:{webSecurity:false}
中添加了这一行
webPreferences:{webSecurity:process.env.NODE_env！=='development'}
Ah，所以这一行
webSecurity:process.env.NODE_env！='开发“
在开发模式下的值为false，在生产模式下的值为true，太棒了，非常感谢您的帮助！