JavaFX: FXML opening image malformed URL exception protocol: e

Question

I'm trying to learn JavaFX and making a user list that can display user image from a user tableview. Here's the code that I have:

@FXML private ImageView image;
@FXML
     public void buttonSHow(ActionEvent actionEvent) throws MalformedURLException, FileNotFoundException {
      

        CList  =TAbleview.getSelectionModel().getSelectedItems();
        System.out.println(CList.get(0).getPicture());
        //URL url = new URL(CList.get(0).getPicture());
        //FileInputStream input = new FileInputStream (CList.get(0).getPicture());
        image.setImage(new Image(CList.get(0).getPicture()));
        
    }

What I'm trying to do with this code is setting up the ImageView image with an Image using the absolute path stored in the user list. The fxml has this:

<ImageView fx:id = "image"/>

When I tried to run it, it gives me the error with MalformedURLException: unknown protocol e. I tried to just punch in the url manually into the fxml to see if it loads manually,

<ImageView>
<image>
<Image url = "@E:\test.jpg"/>
</image>
</ImageView>

but it still gives me the same error.

`E:\test.jpg` is not a valid relative (or absolute) URL. If you want to hard-code an absolute file URL for testing purposes, use (I think) `url = “file://E:/test.jpg”`. — James_D, Aug 26 '20 at 11:51
@James_D thank you, I've tried your suggestion and it doesn't give me the error, but the load time takes longer and somehow the image is still not displayed — JimmyQP, Aug 26 '20 at 12:12
@kleopatra Hello, I'm learning by myself and have very little clue of where to go, I don't know java naming conventions yet, I will look into that now. Thank you for comment. — JimmyQP, Aug 26 '20 at 12:14
Sorry; long while since I used windows (about 10 minutes after "upgrading" to Vista, I bought a Mac...). You need three `/` after `file:` (two delimiting the protocol `file:` from the hostname, which can be empty, and one delimiting the (empty) hostname from the file path). I.e. `url = "file:///E:/test.jpg"`. See https://en.wikipedia.org/wiki/File_URI_scheme. Of course, it's almost easier to just include the image in the application as you would do in production. See https://stackoverflow.com/questions/61531317/how-do-i-determine-the-correct-path-for-fxml-files-css-files-images-and-other — James_D, Aug 26 '20 at 12:51
In code, of course, you can do `new Image(new File(...).toURI().toString())`. — James_D, Aug 26 '20 at 12:53
@James_D Thank you so much! It's working now thanks to your help! I changed ```image.setImage(new Image(CList.get(0).getPicture()));``` into ```image.setImage(new Image("file:///"+CList.get(0).getPicture()));``` — JimmyQP, Aug 26 '20 at 13:14
Well, that won't work in general, because not every file path is a valid URL (e.g. if the file name has spaces in it). Do it the way I suggested in the previous comment. — James_D, Aug 26 '20 at 13:16

score 1 · Accepted Answer · answered Aug 26 '20 at 13:20

If you are intending to set the image based on a file in the file system (e.g. one chosen by the user), you need to create a URL representing the file.

You should not try to construct this yourself, but should use the File.toURI() method, which handles creating the protocol and resolving file paths that are not valid URLs (e.g. file names containing illegal URL characters, such as whitespace) correctly.

So you should do

File file = new File(CList.get(0).getPicture());
image.setImage(new Image(file.toURI().toString()));

JavaFX: FXML opening image malformed URL exception protocol: e

1 Answers1