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

最后，您还可以使用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，那么您的网络包配置可能会有所不同。

Answer 2

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

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

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

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

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

2 个答案: