使用 fxml 在 JavaFX 中显示图像

Question

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

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

我的项目目录结构：

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

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

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

我试过了：

"/res/icon.png" -> 运行时错误 #1
"res/icon.png" -> Lint 错误 + 运行时错误 #1
"/../res/icon.png" -> Lint 错误 + 运行时错误 #1
"../res/icon.png" -> Lint 错误 + 运行时错误 #1
"@/res/icon.png" -> 运行时错误 #2
"@res/icon.png" -> Lint 错误（我正在使用的）
"@/../res/icon.png" -> Lint 错误 + 运行时错误 #2
"@../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 中使用 .. 或 .。我只是在测试）

我见过：

Why does Image don't load in JavaFX 这正是我的配置。
How to show image using ImageView 从那里我得到了 link fxml 图像的正确方法。没有错误，但图像不是 loading/displaying.
ImageView does not work 但我想在 fxml 中做到这一点 .
Can't load JavaFX Image 再次仅 fxml。
Cannot load Image in JavaFX 再次仅 fxml。
Load Image to ImageView JavaFX 再次仅 fxml。
我没有使用 CSS.
JavaFX image loading in background and threads不是我感兴趣的
非常广泛，但是fxml呢？

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

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

正确的镜像名称：名称有效，镜像正确部署到out文件夹。但是没有被IDE识别，导致报错或者不显示。
正确路径

a) 绝对 URL

有趣的是，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) 相对 URL

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

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

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

Classpath：我还确保我有项目根目录的相对地址，src 文件夹（我相信是 class 路径根。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/，它将自动被视为您的资源文件夹。

使用 fxml 在 JavaFX 中显示图像

Display Image in JavaFX using fxml

java

javafx

fxml