how to add a local img with file://... in javafx webkit

Question

I want to show a picture in javafx webview local html. here is my code, But I found the picture can not be shown.The image url is "file:/D:/a.jpg".

enter image description here

//Main WebViewBrowser.java

public class WebViewBrowser extends Application {

    @Override public void start(Stage stage) throws Exception {
        WebView browser = new WebView();
        browser.setContextMenuEnabled(false);
        WebEngine webEngine = browser.getEngine();
        String url = this.getClass().getResource("t.html").toExternalForm();
        System.out.println(url);
        //out put is "jar:file:/D:/data/netbeans/WebViewBrowser1/dist/run690102893/WebViewBrowser.jar!/webviewbrowser/t.html"
        Scene scene = new Scene(browser);
        webEngine.load(url);
        stage.setScene(scene);
        stage.show();
    }

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


//t.html
//.............
<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div>TODO write content</div>
    <img src="a.jpg" alt="aaa"/>  <!-- the relative path works -->
    <img src="file:/D:/a.jpg" alt="aaa"/>  <!-- the absolute path dos not work.why ?-->
</body>
 </html>

I just want to know how i can load the image which url is like 'file:/D:/a.jpg'. Thak you very much.

It works for me. Have you tried opening t.html from a browser? Do you see the image twice? — José Pereda, Jan 10 '15 at 20:20
yes, i can see both of the two image when i open t.html in my browser. but the absolute path in javafx dong not work. — zhangxm1991, Jan 11 '15 at 00:43
I am sorry, i test again, it works. My problem is happened when t.html is in a jar, just like t.html has "jar:file:/D:/application.jar!/com/example/t.html" , then the first image is in the jar too. The second image is still "file:/D:/a.jpg", then this problem happens. — zhangxm1991, Jan 11 '15 at 01:01
If you still have problems, please edit your question and give more details of your configuration. — José Pereda, Jan 11 '15 at 01:10
I had update the problem description, the full test code is there. thank you very very much. — zhangxm1991, Jan 11 '15 at 01:14
I upload my project [here](http://moneypublic.qiniudn.com/WebViewBrowser1.7z), you can download it and have a test with netbeans. Don not froget copy a.jpg to D:/a.jpg — zhangxm1991, Jan 11 '15 at 01:19

score 2 · Accepted Answer · edited May 23 '17 at 12:01

With the new description of your problem, I can reproduce it too: it seems WebView can't access to local files if the web page is loaded from a jar file.

After searching for a while, I've just found this bug report on JIRA (you need to be registered to access to it):

RT-39031 [WebView] local images not loaded when web page is loaded from jar file

As it is pointed out in the report, if you right-click over the alt description, you can load the image on a new window, what means it's not a problem of security restrictions (sandbox).

For the moment there's no easy solution. One that is proposed also here is encoding the image as a base64 string:

<img src="data:image/png;base64,(...)" />

public String pathToBase64(String path) throws IOException {
    return Base64.getEncoder().encodeToString(Files.readAllBytes(Paths.get(path)));
}

Other solution is using webEngine.loadContent(). There's already an example here that may work.

EDIT

As the OP points out, there's another workaround to deal with local images loading, based on the use of a custom URL protocol. In this question there's already a working solution. For the image loading this is a possible implementation:

private void loadImage() throws IOException {
    String imgPath = getURL().toExternalForm();
    String ext = imgPath.substring(imgPath.lastIndexOf('.')+1);
    imgPath = imgPath.startsWith(PROTOCOL+"://") ? 
                 imgPath.substring((PROTOCOL+"://").length()) :
                 imgPath.substring((PROTOCOL+":").length());

    try{
        BufferedImage read = ImageIO.read(new File(imgPath));
        ByteArrayOutputStream os = new ByteArrayOutputStream();
        ImageIO.write(read, ext, os);
        data=os.toByteArray();
    } catch(IOException ioe){
        System.out.println("IO exception: "+ioe);
    }
}

Thank you very much! You are a help Warm-hearted person， much thanks。 I have solution this by create my custom url protocol named "mem", like "mem://xxx.jpg" and It works. I hope oracle can fix it in before too long. Thank you again. — zhangxm1991, Jan 11 '15 at 03:33
That's a really hacky workaround! I've checked this [question](http://stackoverflow.com/questions/17522343/custom-javafx-webview-protocol-handler) and made it work too, so I'll add it to the answer as another possible solution. — José Pereda, Jan 11 '15 at 12:01

how to add a local img with file://... in javafx webkit

1 Answers1