All geek questions in one place

JavaFX WebView html downloader does not load images

Well, I have an html file with a tag that points to an image inside the / img / folder. Through a JavaFX windowed application (not in the same html file path) I load the html file, but the image does not load. This is how I upload the html file:

@FXML WebView webView; // I get the webView through @FXML annotation ... webView.getEngine().loadContent("path/to/file.html");

HTML file structure:

 path/to/file.html path/to/img/image.png

Here is the HTML content:

 <h1 style="color:red; font-style: italic"> This is opencraft presentation :) </h1> <img src="img/image.png"> <p> This is a simple description of how the game works, lol. </p>

IMAGE IS SHIPPED IF I DOWNLOAD WITH A BROCHURE

Can anybody help me?

+5
source share
4 answers

I ran into the same problem and solved it by changing the src link on the image at runtime. This code will work when you run inside your IDE and when you run the application in a JAR file. Tested using 1.8.0_121 on Ubuntu and Windows 10.

  Platform.runLater( () -> { WebView webView = new WebView(); WebEngine webEngine = webView.getEngine(); webEngine.getLoadWorker().stateProperty().addListener(new ChangeListener<Worker.State>() { public void changed(ObservableValue ov, Worker.State oldState, Worker.State newState) { if (newState == Worker.State.SUCCEEDED) { NodeList nodeList = doc.getElementsByTagName("img"); for (int i = 0; i < nodeList.getLength(); i++) { HTMLImageElement n = (HTMLImageElement)nodeList.item(i); String path = n.getSrc(); if( path.startsWith("file://")) { path = path.substring(7,path.length()); } else if( path.startsWith("jar:")) { path = path.substring(4,path.length()); } URL m = YOURCLASS.class.getResource(path); if( m != null ) { n.setSrc(m.toExternalForm()); } } } } }); webEngine.load( url ); }

Inside your HTML you must specify the image using the full path to the resource. You can use the relative path if you are careful with the selection of YOURCLASS.

+1
source

Basically the problem is that to work with relative links in html you need the full url, including the scheme, etc. A URL related to the current class or working directory will not work.

Assuming that the html file and the image associated with it are associated with the application (i.e. when you create the jar file for the application, the html file and image will be part of the jar file), you can get the URL for the html file with

 getClass().getClassLoader().getResource("path/to/file.html");

where the path refers to the class path. Then you can use toExternalForm() to convert to String in the appropriate format. This is suitable for html man pages etc.

Here is an example:

HTMLTest.java:

 package htmltest; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.web.WebView; import javafx.stage.Stage; public class HTMLTest extends Application { @Override public void start(Stage primaryStage) throws Exception { WebView webView = new WebView(); webView.getEngine().load(getClass().getClassLoader().getResource("htmltest/html/test.html").toExternalForm()); Scene scene = new Scene(webView, 600, 600); primaryStage.setScene(scene); primaryStage.show(); } public static void main(String[] args) { launch(args); } }

test.html:

 <html> <head><title>Test</title></head> <body> <h1>Test page</h1> <img src="img/testImage.png"/> </body> </html>

testImage.png:

enter image description here

Project Layout:

 htmltest - HTMLTest.class - html - test.html - img - testImage.png

Screenshot:

enter image description here

On the other hand, if you really download the HTML file from the file system, you can create a File object for the HTML file and then convert it to a URI. This would be appropriate, for example, if you wrote an HTML editor in which the user edited the HTML file and saved it in the file system, and you wanted to display the result in a web view; or, if you suggested the user upload an HTML file using FileChooser .

The code for this will look like this:

 File htmlFile = new File(...); // or get from filechooser... webEngine.load(htmlFile.toURI().toString());
0
source

First you should get the local image path as a string

 String path = System.getProperty("user.dir");

Then you need to replace the labels "\" with "/" in the local path

 path = path.replace("\\", "/");

Then you can print the path using system.out.print(path) and it will get your local direct path to implement your JavaFx project, for example D:/Projects/Java_Fx/My_Project
If your imege file in a folder like "img" uses path += "/img/";
Then your local image path will be D:/Projects/Java_Fx/My_Project/img/

Then download an html file like this,

 webView.getEngine().loadContent("<!doctype html> \n" + "<html> \n" + "<head> \n" + "<meta charset='utf-8'> \n" + "<title>Your html</title> \n" + "</head> \n" + "<body> \n" + "<h1 style='color:red; font-style: italic'> \n" + "This is opencraft presentation :) \n" + "</h1> \n" + "<img src='file:/"+path+"image.png'> \n" + "<p> \n" + " This is a simple description of how the game works. \n" + "</p> \n" + "</body> \n" + "</html>"

I directly uploaded the html to the engine with the "path" before image.png and used a single quote everywhere inside the html code and a double quote to concatenate strings
<img src='file:/"+path+"image.png'>
If you want to insert an image as a backgroud image, you can use style='background-image: url(file:/"+path+"image.png);'

0
source

Try using a hard link to the location of the html file in webView.getEngine().loadContent("path/to/file.html");

Something like that

 String htmlFile = "file:///c:/full/path/to/file.html"; webView.getEngine().loadContent(htmlFile);

Although this may give you a few more problems when you want to pack the application (if the html files and resources are packaged with the application), there are also workarounds. Thus, it is safer that your html files and resources are not packed with the application. I will try to update this post to reflect this.

-1
source

Source: https://habr.com/ru/post/1262091/

More articles:


All Articles