使用 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

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

---

我见过：

1. Why does Image don't load in JavaFX 这正是我的配置。
2. How to show image using ImageView 从那里我得到了在 fxml 中链接图像的正确方法。没有错误，但图片未加载/显示。
3. ImageView does not work 但我想在 fxml only 中这样做。
4. Can't load JavaFX Image 再次仅 fxml。
5. Cannot load Image in JavaFX 再次仅 fxml。
6. Load Image to ImageView JavaFX 再次仅 fxml。
7. JavaFX Image loading error我没有使用 CSS。
8. JavaFX image loading in background and threads 不是我感兴趣的。
9. How to determine correct path... 非常广泛，但是 fxml 呢？

---

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

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

1. 正确的映像名称：名称有效，并且映像已正确部署到 out 文件夹。但是 IDE 无法识别，导致报错或不显示。

2. 正确的路径

   a) 绝对网址

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

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

并且有效。不确定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) 相对网址

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

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

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

1. 类路径：我还确保我有来自项目根目录的相对地址，src 文件夹（我相信它是类路径根目录。Wrong?）李>

但最后，所有这些仍然无关紧要，因为我使用的是 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/，它将自动被视为您的资源文件夹。