Images not showing on launch by the main, but showed on Scene builder

Question

I'm new on coding, especialy in java, and i've tryed to use JavaFx with scene builder. My issue today is that i've done that menu with scene builder:

https://imgur.com/a/IH0lf

And when I run it the images doesn't show. I've try with other scenes i've made, same issue.

https://imgur.com/a/UuCMi

Here is my Main :

package com.doki;

import java.io.IOException;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.stage.Stage;

public class MainRpg extends Application {

    private Stage stage;
    private BorderPane fenetre;

    @Override
    public void start(Stage stage) {
        this.stage = stage;
        this.stage.setTitle("Xar'Saroth");

        initFenetre();

        showMenu();
    }

    /**
     * Initializes the root layout.
     */
    public void initFenetre() {
        try {
            // Load root layout from fxml file.
            FXMLLoader loader = new FXMLLoader();
            loader.setLocation(MainRpg.class.getResource("view/Fenetre.fxml"));
            fenetre = (BorderPane) loader.load();

            // Show the scene containing the root layout.
            Scene scene = new Scene(fenetre);
            stage.setScene(scene);
            stage.show();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * Shows the person overview inside the root layout.
     */
    public void showMenu() {
        try {
            // Load person overview.
            FXMLLoader loader = new FXMLLoader();
            loader.setLocation(MainRpg.class.getResource("view/Menu.fxml"));
            AnchorPane personOverview = (AnchorPane) loader.load();

            // Set person overview into the center of root layout.
            fenetre.setCenter(personOverview);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * Returns the main stage.
     * @return
     */
    public Stage getStage() {
        return stage;
    }

    public static void main(String[] args) {
        launch(args);
    }
}

And my scene code :

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ButtonBar?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane prefHeight="600.0" prefWidth="900.0" xmlns="http://javafx.com/javafx/9.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <ImageView fitHeight="600.0" fitWidth="900.0" pickOnBounds="true" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <image>
            <Image url="@../menuImage.jpg" />
         </image>
      </ImageView>
      <ImageView fitHeight="186.0" fitWidth="489.0" layoutX="206.0" layoutY="343.0" pickOnBounds="true" preserveRatio="true" AnchorPane.bottomAnchor="150.0">
         <image>
            <Image url="@../xarSaroth.png" />
         </image>
      </ImageView>
      <ButtonBar layoutX="295.0" layoutY="518.0" prefHeight="40.0" prefWidth="281.0" AnchorPane.bottomAnchor="50.0">
        <buttons>
          <Button mnemonicParsing="false" prefHeight="25.0" text="Continuer" />
            <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="134.0" text="Nouvelle Partie" />
        </buttons>
      </ButtonBar>
   </children>
</AnchorPane>

I've read thoses posts :

Why isn't my background image being displayed in FXML

Images imported in scene builder is not getting displayed while executed in netbeans

But the solutions didn't work on me, or i'm just a bit too stupid.

By the way i've gor this error message when I launch, I don't think that is the issue : WARNING: Loading FXML document with JavaFX API of version 9.0.1 by JavaFX runtime of version 8.0.121

Thanks!

EDIT :

I have done this change : ((Image)loader.getNamespace().get("image1")).getException().printStackTrace(System.err);

and it makes that kind of error. I understand that there is a path issue no?

    java.io.FileNotFoundException: C:\Users\Stagiaire ACI\Desktop\Java\XarSaroth\bin\com\doki\menuImage.jpg (Le fichier spécifié est introuvable)
at java.io.FileInputStream.open0(Native Method)
at java.io.FileInputStream.open(Unknown Source)
at java.io.FileInputStream.<init>(Unknown Source)
at java.io.FileInputStream.<init>(Unknown Source)
at sun.net.www.protocol.file.FileURLConnection.connect(Unknown Source)
at sun.net.www.protocol.file.FileURLConnection.getInputStream(Unknown Source)
at java.net.URL.openStream(Unknown Source)
at com.sun.javafx.iio.common.ImageTools.createInputStream(ImageTools.java:486)
at com.sun.javafx.iio.ImageStorage.loadAll(ImageStorage.java:311)
at com.sun.javafx.tk.quantum.PrismImageLoader2.loadAll(PrismImageLoader2.java:127)
at com.sun.javafx.tk.quantum.PrismImageLoader2.<init>(PrismImageLoader2.java:71)
at com.sun.javafx.tk.quantum.QuantumToolkit.loadImage(QuantumToolkit.java:720)
at javafx.scene.image.Image.loadImage(Image.java:1065)
at javafx.scene.image.Image.initialize(Image.java:807)
at javafx.scene.image.Image.<init>(Image.java:695)
at com.sun.javafx.fxml.builder.JavaFXImageBuilder.build(JavaFXImageBuilder.java:47)
at com.sun.javafx.fxml.builder.JavaFXImageBuilder.build(JavaFXImageBuilder.java:37)
at javafx.fxml.FXMLLoader$ValueElement.processEndElement(FXMLLoader.java:763)
at javafx.fxml.FXMLLoader.processEndElement(FXMLLoader.java:2823)
at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:2532)
at javafx.fxml.FXMLLoader.loadImpl(FXMLLoader.java:2441)
at javafx.fxml.FXMLLoader.load(FXMLLoader.java:2409)
at com.doki.MainRpg.showMenu(MainRpg.java:56)
at com.doki.MainRpg.start(MainRpg.java:24)
at com.sun.javafx.application.LauncherImpl.lambda$launchApplication1$162(LauncherImpl.java:863)
at com.sun.javafx.application.PlatformImpl.lambda$runAndWait$175(PlatformImpl.java:326)
at com.sun.javafx.application.PlatformImpl.lambda$null$173(PlatformImpl.java:295)
at java.security.AccessController.doPrivileged(Native Method)
at com.sun.javafx.application.PlatformImpl.lambda$runLater$174(PlatformImpl.java:294)
at com.sun.glass.ui.InvokeLaterDispatcher$Future.run(InvokeLaterDispatcher.java:95)
at com.sun.glass.ui.win.WinApplication._runLoop(Native Method)
at com.sun.glass.ui.win.WinApplication.lambda$null$148(WinApplication.java:191)
at java.lang.Thread.run(Unknown Source)

Answer 1

OK, I think that when you write code for the url path of the image in imageView, you should not refer to the file tree structure of the IDE, but should refer to the file tree structure of the compiled directory.

For example, here is the wrong code. I have marked the "image" folder as Resource Folder in IDEA. The picture will show when you preview in the scene builder, but it does not show when you run the program.

the wrong example

According to the picture, the url path is absolutely correct but it fails to show. Why? I think you should refer to the file tree structure of the compiled directory "out" and you will understand.

the correct example

So in this case, you can change the code as:

<image>
    <Image url="@../desk.jpg" />
</image>

It will work although it fails to preview in scene builder.

And the following code also works, because the "BallGame" is the root directory:

<image>
    <Image url="@/desk.jpg" />
</image>

Another way, to keep in the same form before and after compiling. You can place the image folder in the src folder. For example；

another way

It also works.