如何将本地图片拖拽到SceneBuilder加载到FXML，且程序运行正常显示

问题根源 #

你遇到的问题是SceneBuilder拖拽本地图片生成的路径是相对SceneBuilder编辑时文件位置的相对路径，程序运行时JavaFX类加载器的资源检索根目录和编辑时不一致，导致无法定位到图片，该问题和Controller初始化没有直接关联。

解决方法 #

方案1（推荐）：将图片放入项目资源目录

该方案打包后也能正常读取图片，不会受环境影响：

• 在项目的资源根目录（和你存放layout文件夹的目录同级，通常为src/main/resources）新建专门存放图片的目录，例如命名为images，将需要用到的84273.jpg放入该目录。
• 修改FXML文件中Image标签的url属性为@/images/84273.jpg，路径开头的/代表从资源根目录开始检索，避免相对路径层级错误。
• 也可以在SceneBuilder的ImageView属性面板的「图像」选项中，重新选择资源目录下的对应图片，SceneBuilder会自动生成正确的路径。

方案2：直接使用本地绝对路径

如果不需要打包发布、仅本地临时测试可以用该方案，更换设备运行会失效：

• 将FXML文件中Image标签的url属性替换为本地绝对路径的file协议格式，示例如下：
  • Windows系统：url="file:C:/Users/你的用户名/Pictures/Pictures/84273.jpg"
  • macOS/Linux系统：url="file:/Users/你的用户名/Pictures/Pictures/84273.jpg"

补充：通过Controller加载图片的写法 #

如果需要通过Controller代码动态加载图片，可以按照以下步骤操作：

1. 给FXML中的ImageView标签添加fx:id属性：

   <ImageView fx:id="mainImg" fitHeight="413.0" fitWidth="608.0" layoutX="-1.0" layoutY="-4.0"/>
   

2. 在Controller类中注入组件并加载图片：

   package collage;
   
   import javafx.fxml.FXML;
   import javafx.scene.image.Image;
   import javafx.scene.image.ImageView;
   
   public class Controller {
       @FXML
       private ImageView mainImg;
   
       @FXML
       public void initialize() {
           // 从资源目录加载的写法
           mainImg.setImage(new Image(getClass().getResourceAsStream("/images/84273.jpg")));
           // 本地路径加载的写法
           // mainImg.setImage(new Image("file:你本地图片的绝对路径"));
       }
   }
   

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