JavaFX FXML工具栏仅显示图形的按钮无法加载图片如何解决？

问题原因及解决方案 #

按钮仅显示灰色轮廓没有加载出图形，基本都是资源路径错误、资源未正确打包、尺寸适配问题导致，可按照以下步骤逐一排查调整：

• 第一步：修正资源路径
  FXML中@开头的相对路径默认是相对于当前FXML文件的存放位置，如果你使用标准Maven/Gradle项目结构，可参考以下规则调整：
  • 若red.png和FXML文件存放在同一目录，原路径@red.png写法正确
  • 若图片统一存放在资源根目录的img文件夹下，FXML存放在fxml文件夹下，可使用类路径绝对路径写法避免相对路径计算错误：<Image url="@/img/red.png"/>（路径开头的/代表从类路径根目录开始查找）
  • 额外注意图片文件名的大小写，Linux、macOS系统对文件名大小写敏感，Red.png和red.png会被识别为不同文件
• 第二步：添加尺寸适配属性
  未指定ImageView尺寸时，若图片分辨率过大，会超出按钮显示范围被裁剪，可给ImageView指定适配工具栏的尺寸：

  <ImageView fitWidth="20" fitHeight="20" preserveRatio="true">
  

• 第三步：确认资源被正确打包到构建产物
  如果你使用Maven/Gradle构建项目，需要确认构建配置没有排除png格式的资源文件，编译完成后检查项目输出的classes目录下是否存在对应路径的png文件。

调整后完整的FXML参考代码 #

<bottom>
    <ToolBar fx:id="tbTextColor" >
        <Button fx:id="btnRed" contentDisplay="GRAPHIC_ONLY">
            <graphic>
                <ImageView fitWidth="20" fitHeight="20" preserveRatio="true">
                    <image>
                        <!-- 替换为你实际的正确路径 -->
                        <Image url="@/img/red.png"> </Image>
                    </image>
                </ImageView>
            </graphic>
        </Button>
        <!-- 其余按钮按照相同规则调整即可 -->
    </ToolBar>
</bottom>

内容的提问来源于stack exchange，提问作者Datango