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

Question

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

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

我收到此错误：

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

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

Answer 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">

最后，您还可以使用 webpackurl-loader将文件加载为 a dataUrl，但我建议将其作为更高级的练习，并且暂时坚持使用简单的方法。

编辑

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

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