提问者:小点点

CSS使用相对路径时,背景图像不显示


我正在使用JavaFX进行项目。文件结构如下所示(CEP是根):

CEP
  +img
     menu.jpg
  +src
     +css_files
        MainMenu.css

我想做的是从MainMenu. css文件中的img目录设置背景图像。到目前为止,我已经尝试了不同的url(见下文),但没有一个有效。

-fx-background-image: url("./CEP/img/menu.jpg");
-fx-background-image: url("../CEP/img/menu.jpg");
-fx-background-image: url("CEP/img/menu.jpg");
-fx-background-image: url("/CEP/img/menu.jpg");
-fx-background-image: url("../../img/menu.jpg");
-fx-background-image: url("/img/menu.jpg");
-fx-background-image: url("./img/menu.jpg");
-fx-background-image: url("../img/menu.jpg");
-fx-background-image: url("img/menu.jpg");

如果我像这样用全路径

-fx-background-image: url("file:///C:/Users/Konrad/Desktop/java/CEP/img/menu.jpg");

一切正常,但这不是我想做的。如何使用相对路径加载背景图像?

编辑。根据要求,这里是build文件夹结构:

build
   +classes
      +css_files
      +(other folders)
      menu.jpg
   +empty (empty)
   +generated-sources (has 1 empty subfolder)

共1个答案

匿名用户

您的img文件夹及其内容不是源代码文件夹层次结构的一部分,因此不会作为应用程序的一部分进行部署。您可以配置您的IDE来部署该文件夹的内容,或者更简单地将img(及其内容)移动到src中。

如果执行后者,则img将在部署后位于类路径的根目录,与css_files并列,因此

-fx-background-image: url("/img/menu.jpg");

-fx-background-image: url("../img/menu.jpg");

应该工作。

另一方面,如果您将img配置为源文件夹,则img的内容将放置在类路径的根目录下。在这种情况下,这意味着menu. jpg将位于类路径的根目录下,因此您需要以下之一

-fx-background-image: url("/menu.jpg");

-fx-background-image: url("../menu.jpg");