JavaFX Image not showing in stage

Question

I've tried several times and several ways but I can't make my image show on stage as I want. I think it might has to do with the path where java looks for resources, but i'm not sure, since I'm just starting using visual libraries (JavaFX in this case). Here's my directory structure:

MyProject
 |_assets
 |  |_img
 |     |_myImage.jpg
 |
 |_some
 |_other
 |_folders
 |
 |_src
    |_ve
       |_org
          |_project
             |_MyProject.java
             |_StratPage.fxml
             |_StartPageController.java

I need to retreive myImage.jpg to be rendered, and I've tried the following:

1) Pure fxml approach:

<ImageView
     id="logo" 
     fx:id="logo"
     fitHeight="99.0" 
     fitWidth="99.0" 
     layoutX="14.0" 
     layoutY="18.0" 
     pickOnBounds="true" 
     preserveRatio="true">
         <image>
            <Image url="@../../../../assets/img/myImage.jpg" />
         </image>
</ImageView>

2) Using both fxml and java. Declaring the ImageView element with fx:id="logo", and injecting the image from StartPageController.java like this:

public class StartPageController implements Initializable {

    @FXML
    private ImageView logo;


    @Override
    public void initialize(URL url, ResourceBundle rb) {
        this.logo = new ImageView("file:../../../../assets/img/myImage.jpg");
    }    

}

Neither way produce any exception, i just does not show the image. I have no idea what to do. I would really appreciate your help.

UPDATES:

First

I tried giving up on having the proposed directory structure, and placed the image file in the same folder of StartPageController.java. By doing

logo = new ImageView(new Image(getClass().getResourceAsStream("myImage.jpg")))

I'm not getting any exception, but the image is not rendering, which suggest me it's not about finding the resource, but about rendering the image. Could it be the lack of any library? I'm on a Windows 8 environment, using Netbeans 8.0. Thanks again for your answers.

Second

I just deactivated packaging and distributing the app in the project properties in Netbeans. Now the images are rendering correctly, but I don't consider the issue solved, since when I need to distribute the software it will re emerge. Please, help is still needed! :)

Postorbital

Can you try with this.logo = new ImageView("/assets/img/myImage.jpg");? That should start looking from the root of your folder. – Snick

Tried this.logo = new ImageView("/assets/img/myImage.jpg");, and threw an Exception. Preppended file:, like this: this.logo = new ImageView("file:/assets/img/myImage.jpg"); and behaved as mentioned in the question. It doesn't throw any exception, but loads the app correctly except for the image, which is not displaying. Any other idea? Thanks for your help :) – Postorbital

Answer 1

I had the same error as you. So to correct it placed my image in resources folder in the same level of "src" of my project. This is my code, and it works.

public void showImage() {
    try {
        Image image = new Image("resources/img/akonolingaMap.jpg");
        imageView.setImage(image);
        imageView.setCache(true);
    } catch (Exception e) {
        printStackTrace();
    }
}

Pinon

Answer 2

I checked the code in my own project and it works with snippet below. I've adjusted it to your example

 this.logo = new ImageView(new Image(getClass().getResourceAsStream("/assets/img/myImage.jpg")));

Snick

I'm geting a NullPointerException: Input stream must not be null. I also tried using "file:/assets/img/myImage.jpg", but got the exception too. Where does getResourceAsStream() looks for the file? – Postorbital

are you sure you simulated the same directory structure I have? – Postorbital

Try to put your assets folder under your src folder, does that work? (clean and build just to be sure) – Snick

Answer 3

If you use Intellij as your main editor, then you could mark your folder as "Resources" or just open "Project Structure" -> "Modules" -> then mark your image folder as "Resources"

Hope that will help you.

Sophrosyne

Simplest answer. – Hailstone

Answer 4

In a java application there is a distinction between file system File and resource (on the class path, inside the .jar).

If the image is part of the application, and fixed, read-only, as your relative path suggests, use a resource.

However then the image must be inside the jar.

Maybe:

/src/assets/img/myImage.jpg

or make /assets a top source directory too.

Then /img/myImage.jpg (or in the first case /assets/img/myImage.jpg)

Programmatically one does not use File but URL getClass().getResource("/img/myImage.jpg") or getResourceAsStream.

Sexpartite

Hi! thanks for your reply! how do I make /assets a top source directory? your answer is similar to Perneel's, but it is not working for me. Check the comments in Perneel's answer please. – Postorbital

In eclipse: rename assets, right click project: New / Source Folder: "assets". Then move the img folder. BTW the maven build infrastructure is great across IDEs, and provides best practices, folder conventions. – Sexpartite

Or just add assets under src. – Sexpartite

Could you please provide a link to maven documentation on good practices? – Postorbital

I even gave up on having the proposed directory structure, and placed the image file in the same folder of StartPageController.java. By doing this.logo = new ImageView(new Image(getClass().getResourceAsStream("myImage.jpg"))) I'm not getting the exception, but the image is not rendering, which suggest me it's not about finding the resource, but about rendering. Could it be the lack of any library? I'm on a Windows 8 environment, using Netbeans 8.0. Thanks again for your replies. – Postorbital

The above should work. Caveats: (1) as oposed to Windows, jars and other operating systems are case-sensitive, (2) getClass() must deliver a class from the same jar; sometimes it is safer to use MyClassInJar.class. – Sexpartite

Sorry, Maven tutorials, articles and such you have to search yourself. P.S. check the produced .jar with 7zip/WinZip for the image file. – Sexpartite

Answer 5

This issue can be solved by changing the folder name of where the icons/pics are located to 'resources'. It has to be in your current src-folder, this worked fine for me (I have had the same issue).

Negotiable