使用 fxml 在 JavaFX 中显示图像

Question

我一直没有成功尝试使用 fxml 在我的 JavaFX 应用程序中显示我的图像。 我的代码：

...
<ImageView fitHeight="24" fitWidth="24"
    pickOnBounds="true" preserveRatio="true">
        <Image url="@res/icon.png"/>
</ImageView>
...

我的项目目录结构：

没有错误，但我的图像没有显示。 我认为图像已加载，但未显示。
这可能吗？ 我该如何检查？ 如果是，不应该有错误吗？

事实上，即使我给出了错误的名称，也不会出现运行时错误。 所以可能没有加载？

我也尝试加载不同的图像并更改尺寸，但没有任何效果。

---

我试过了：

1. "/res/icon.png" -> 运行时错误 #1
2. "res/icon.png" -> Lint 错误 + 运行时错误 #1
3. "/../res/icon.png" -> Lint 错误 + 运行时错误 #1
4. "../res/icon.png" -> Lint 错误 + 运行时错误 #1
5. "@/res/icon.png" -> 运行时错误 #2
6. "@res/icon.png" -> Lint 错误（我使用的是什么）
7. "@/../res/icon.png" -> Lint 错误 + 运行时错误 #2
8. "@../res/icon.png" -> Lint 错误，无显示

运行时错误 #1： Caused by: java.lang.IllegalArgumentException: Invalid URL: Invalid URL or resource not found

运行时错误 #2： Caused by: javafx.fxml.LoadException: Invalid resource: /res/icon.png not found on the classpath

（我知道我们不应该在网址中使用 .. 或 . 。我只是在测试）

---

我见过：

1. 为什么图像不能在 JavaFX中加载，这正是我的配置。
2. 如何使用 ImageView 显示图像，从那里我得到了在 fxml 中链接图像的正确方法。 没有错误，但图像未加载/显示。
3. ImageView的不工作，但我想只有这样做在FXML。
4. 无法再次加载 JavaFX Image仅 fxml。
5. 无法再次在 JavaFX 中加载图像fxml。
6. 再次将图像加载到 ImageView JavaFX仅 fxml。
7. JavaFX 图像加载错误我没有使用 CSS。
8. JavaFX 图像在后台和线程中加载不是我感兴趣的。
9. 如何确定正确的路径...非常广泛，但是 fxml 呢？

---

编辑：我重新创建了原始项目的副本，并按照评论尝试了故障排除。

结果（对故障排除部分的响应）：

1. 正确的映像名称：名称有效，并且映像正确部署到out文件夹。 但它没有被IDE识别并导致错误或无显示。

2. 正确的路径

   a)绝对网址

有趣的是， getClass().getResource("/res/icon.png").getExternalForm()方法给出：

Caused by: java.lang.IllegalArgumentException: Invalid URL: unknown protocol: c

和作品。 不确定file:是否应该在那里。 getPath()方法给出：

 /C:/Users/Chander%20Shekhar/IdeaProjects/TestRes/out/production/TestRes/res/icon.png

并且不起作用（运行时错误#1）。 删除第一个/给出了另一个错误：

 Caused by: java.lang.IllegalArgumentException: Invalid URL: unknown protocol: c

b)相对 URL

所以我实际上在我的res文件夹中创建了一个标记类，并使用了ImageMarker.class.getResource("icon.png").toExternalForm()

 file:/C:/Users/Chander%20Shekhar/IdeaProjects/TestRes/out/production/TestRes/res/icon.png

与第一个示例相同，并且有效！

3. 类路径：我还确保我有项目根目录中的相对地址，即src文件夹（我相信这是类路径根。 错了吗？）

但最终，所有这些仍然无关紧要，因为我使用的是 fxml。 上帝！

Answer 1

我建议您使用资源文件夹，并将 FXML 和图像都放在该文件夹中。 所以你会有这个文件结构：

src/
|-- main/
    | -- java/
    | -- resources/
         | -- fxml/screen.fxml
         | -- img/image.png

然后在screen.fxml你会做类似的事情

<ImageView pickOnBounds="true" preserveRatio="true">
    <image>
        <Image url="@../img/image.png" />
    </image>
</ImageView>

这就是我组织项目的方式，而且效果很好。 CSS 文件也将存在于资源中，希望有所帮助。

PS：您有一个res/文件夹，但除非您确认，否则 Java 不会将其识别为资源文件夹。 如果您使用的是 IntelliJ，则可以右键单击它，然后选择“标记为资源根目录”。 如果您使用 maven，则有多种方法可以将其声明为您的资源文件夹。 无论如何，如果您只是将其重命名为resources/ ，它将被自动视为您的资源文件夹。