How to load images from css file in JavaFX 8

Question

I have this css file which loads images in JavaFX 8 application:

#pill-left {  
    -fx-padding: 5;  
     -fx-border-image-source: url("/com/dx57dc/images/left-btn.png");  
    -fx-border-image-slice: 4 4 4 4 fill;  
    -fx-border-image-width: 4 4 4 4;  
    -fx-border-image-insets: 0;  
    -fx-border-image-repeat: stretch;  
     -fx-background-color: null !important;  
}  
#pill-left:selected { -fx-border-image-source: url("/com/dx57dc/images/left-btn-selected.png"); }  
#pill-left .label {  
    -fx-text-fill: #d3d3d3;  
    -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.75) , 0, 0.0 , 0 , -1 );  
 }  
#pill-left:selected .label {  
    /* -fx-text-fill: black; */  
    -fx-text-fill: white;  
    -fx-effect: dropshadow( one-pass-box , white , 0, 0.0 , 0 , 1 );  
}  
#pill-center {  
    -fx-padding: 5;  
     -fx-border-image-source: url("/com/dx57dc/images/center-btn.png");  
    -fx-border-image-slice: 4 4 4 4 fill;  
    -fx-border-image-width: 4 4 4 4;  
    -fx-border-image-insets: 0;  
    -fx-border-image-repeat: stretch;  
     -fx-background-color: null !important;  
}  
#pill-center:selected { -fx-border-image-source: url("/com/dx57dc/images/center-btn-selected.png"); }  
#pill-center .label {  
    -fx-text-fill: #d3d3d3;  
     -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.75) , 0, 0.0 , 0 , -1 );  
}  
#pill-center:selected .label {  
    -fx-text-fill: black;  
    -fx-effect: dropshadow( one-pass-box , white , 0, 0.0 , 0 , 1 );  
 }  
#pill-right {  
    -fx-padding: 5;  
    -fx-border-image-source: url("/com/dx57dc/images/right-btn.png");  
    -fx-border-image-slice: 4 4 4 4 fill;  
    -fx-border-image-width: 4 4 4 4;  
    -fx-border-image-insets: 0;  
     -fx-border-image-repeat: stretch;  
    -fx-background-color: null !important;  
}  
#pill-right:selected { -fx-border-image-source: url("/com/dx57dc/images/right-btn-selected.png"); }  
#pill-right .label {  
     -fx-text-fill: #d3d3d3;  
    -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.75) , 0, 0.0 , 0 , -1 );  
}  
#pill-right:selected .label {  
    -fx-text-fill: black;  
    -fx-effect: dropshadow( one-pass-box , white , 0, 0.0 , 0 , 1 );  
 }  

The images are located at the Java package com.dx57dc.images

In Java 7_25 this code works as expected but in JavaFX 8 b99 I get this error:

ava.lang.NullPointerException

at com.sun.javafx.sg.prism.NGRegion.renderContent(NGRegion.java:1129)

at com.sun.javafx.sg.prism.NGNode.doRender(NGNode.java:1598)

at com.sun.javafx.sg.prism.NGNode.render(NGNode.java:1520)

at com.sun.javafx.sg.prism.NGGroup.renderChildren(NGGroup.java:233)

at com.sun.javafx.sg.prism.NGGroup.renderContent(NGGroup.java:199)

at com.sun.javafx.sg.prism.NGRegion.renderContent(NGRegion.java:1249)

at com.sun.javafx.sg.prism.NGNode.doRender(NGNode.java:1598)

at com.sun.javafx.sg.prism.NGNode.render(NGNode.java:1520)

at com.sun.javafx.sg.prism.NGGroup.renderChildren(NGGroup.java:233)

at com.sun.javafx.sg.prism.NGGroup.renderContent(NGGroup.java:199)

at com.sun.javafx.sg.prism.NGRegion.renderContent(NGRegion.java:1249)

at com.sun.javafx.sg.prism.NGNode.doRender(NGNode.java:1598)

at com.sun.javafx.sg.prism.NGNode.render(NGNode.java:1520)

at com.sun.javafx.tk.quantum.ViewPainter.doPaint(ViewPainter.java:99)

at com.sun.javafx.tk.quantum.AbstractPainter.paintImpl(AbstractPainter.java:210)

at com.sun.javafx.tk.quantum.PresentingPainter.run(PresentingPainter.java:95)

at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:471)

at java.util.concurrent.FutureTask.runAndReset(FutureTask.java:304)

at com.sun.javafx.tk.RenderJob.run(RenderJob.java:58)

at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1145)

at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:615)

at com.sun.javafx.tk.quantum.QuantumRenderer$PipelineRunnable.run(QuantumRenderer.java:129)

at java.lang.Thread.run(Thread.java:724)

D3D Vram Pool: 13,331,480 used (5.0%), 13,331,480 managed (5.0%), 268,435,456 total

20 total resources being managed

4 permanent resources (20.0%)

1 resources locked (5.0%)

7 resources contain interesting data (35.0%)

0 resources disappeared (0.0%)



D3D Vram Pool: 13,331,480 used (5.0%), 13,331,480 managed (5.0%), 268,435,456 total

20 total resources being managed

4 permanent resources (20.0%)

1 resources locked (5.0%)

7 resources contain interesting data (35.0%)

0 resources disappeared (0.0%)



D3D Vram Pool: 13,331,480 used (5.0%), 13,331,480 managed (5.0%), 268,435,456 total

20 total resources being managed

4 permanent resources (20.0%)

1 resources locked (5.0%)

7 resources contain interesting data (35.0%)

0 resources disappeared (0.0%)

What is the proper way to load images from css in Java 8?

Answer 1

I have a Structure like this:

view
|--css
|   |- style.css
|
|--img
    |- image.png

And use the image like this:

 -fx-background-image: url("../img/image.png");

So, if

/com/dx57dc/images/

is already relative to your css file try a preceding dot ["./com/dx57dc/images/"], else go back to their shared parent folder with (multiple) "../"

Klaus