背景图像未在电子应用程序中加载答案

【问题标题】：Background image not loading in Electron Application背景图像未在电子应用程序中加载
【发布时间】：2017-11-15 21:19:35
【问题描述】：

我在 login.vue 组件所在的目录中有一个图像文件（以下代码所在的位置）。但是，当我尝试此代码时，图像将无法加载：

<div background="benjamin-child-17946.jpg" class="login" style="height:100%;">

我收到此错误：

加载资源失败：服务器响应状态为 404（未找到）

这很奇怪，因为我可以在终端中看到我的图像与 login.vue 位于同一目录中。我正在使用 webpack 进行编译。这可能是什么原因造成的？

【问题讨论】：

标签： html css webpack vue.js electron

【解决方案1】：

您的主要问题是编译单个文件组件并且编译后的脚本不太可能与您的图像位于当前位置的同一目录中。您的第二个问题是您没有正确地将背景图像分配给您的div。你应该使用 CSS。

我建议您在电子应用程序的根目录中创建一个images 目录（或资产或静态或任何您想要的名称）。然后，您可以使用file:// 协议引用该目录中的文件。

其次，我建议您定义一个 CSS 类并使用它。因此，在您的单个文件组件中，定义此样式部分：

<style>
  .background {
    background: url('file:///images/benjamin-child-17946.jpg') no-repeat center center fixed; 
    background-size: cover
  }
</style>

在你的 div 上使用类。

<div class="login background">

最后，您还可以使用 webpack 的 url-loader 将文件加载为 dataUrl，但我建议将其作为更高级的练习，现在只使用简单的方法。

编辑

我使用 electron-vue 从头开始创建了一个项目，该项目使用了 webpack，但在使用 file:// 协议时确实遇到了上述错误，我在不使用 webpack 时不会遇到。使用上面的模板，而不是使用 file:///images/benjamin-child-17946.jpg，把文件放到static目录下，使用/static/benjamin-child-17946.jpg。这允许vue-loader 正常工作。

如果你没有使用electron-vue，那么你的webpack配置可能会有所不同。

【讨论】：

所以我将图像放在了我的应用根目录内的图像目录中，但遇到了“不允许加载本地资源错误”
@randyMoss1994 有一个很长的线程 here 关于解决该错误，特别是关于将 webpack 与电子一起使用。您的代码在 GitHub 或其他地方可用吗？
@randyMoss1994 你是从模板开始的吗？
我在所有 VUE 组件中都使用了模板，但在我的主 index.ejs 文件中没有使用
@randyMoss1994 我不是这个意思，抱歉。我的意思是，您是否使用 electron-vue 之类的模板开始了 Vue 项目？如果是这样，我更新了答案。

【解决方案2】：

值得注意的是，背景不再是有效的 HTML 属性。

编译的 VUE 代码与构建文件夹的方式不匹配，假设您使用的是 CLI。

您需要在其静态资源位置引用图片的完整 URL。

我不确定在这种情况下会是什么，因为我还没有在 Vue CLI 中使用静态资源。

【讨论】：