在电子应用程序中不加载背景图像 [英] Background image not loading in Electron Application

问题描述

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

 < div background =benjamin-child-17946。 jpgclass =loginstyle =height：100％;> 
  

我收到这个错误：

无法加载资源：服务器的状态为404（未找到）

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

解决方案

您的主要问题是编译单个文件组件，并且编译脚本不太可能驻留在与当前位置相同的目录中。你的第二个问题是你没有正确地将背景图片分配给你的 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配置可能会有所不同。

I have an image file in the same directory as my login.vue component (which is where the following code is located). But, when I try this code, the image will not load:

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

I'm getting this error:

Failed to load resource: the server responded with a status of 404 (Not Found)

This is strange, because I can see in my terminal that my image is in the same directory as login.vue. I am using webpack to compile. What might be causing this?

解决方案

Your primary issue is that single file components are compiled and the compiled script is very unlikely to reside in the same directory as the current location as your image. Your second issue is that you are not assigning the background image to your div correctly. You should use CSS.

I would suggest that you make an images directory in the root of your electron application (or assets or static or whatever you want to call it). Then, you can reference files in that directory using the file:// protocol.

Second, I would recommend you define a CSS class and use that. So, in your single file component, define this style section:

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

And on your div just use the class.

<div class="login background">

Finally, you could also use webpack's url-loader to load the file as a dataUrl but I would recommend that as a more advance exercise and just stick with the simple for now.

Edit

I created a project from scratch using electron-vue which uses webpack and I did run into an error with the above using the file:// protocol, that I don't run into when not using webpack. With the above template, instead of using file:///images/benjamin-child-17946.jpg, put the file in the static directory and use /static/benjamin-child-17946.jpg. That allows vue-loader to work properly.

If you are not using electron-vue, then your webpack configuration may be different.

这篇关于在电子应用程序中不加载背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！