2016-12-30 9 views
5

Ну, у меня есть html-файл с тегом, который указывает на изображение внутри папки/img /. Через оконное приложение JavaFX (не в том же пути html-файла) я загружаю html-файл, но изображение не загружается. Вот как я загрузить HTML файл:JavaFX WebView html loader не загружает изображения

@FXML 
WebView webView; // I get the webView through @FXML annotation 

... 
webView.getEngine().loadContent("path/to/file.html"); 

структура HTML-файл:

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

Вот содержание HTML:

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

ОБРАЗ напиваться ЕСЛИ ЗАГРУЗИТЬ ЕГО БРАУЗЕРА

Кто-нибудь может мне помочь?

+0

Можете ли вы разместить «HTML»? –

+0

Я не думаю, что проблема в html-файле, но в любом случае я обновил его. – loryruta

+0

Нет, но это дает мне кое-что испытать. –

ответ

-1

Попробуйте использовать жесткую ссылку на местоположение файла HTML в вашем webView.getEngine().loadContent("path/to/file.html");

Что-то вроде этого

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

Хотя это может дать вам еще несколько вопросов, если вы хотите, чтобы упаковать приложение (если файлы html и ресурсы будут упакованы вместе с приложением), также есть обходные пути. Таким образом, безопаснее, чтобы ваши html-файлы и ресурсы не были упакованы вместе с приложением. Я попытаюсь обновить этот пост, чтобы это отразить.

+0

Да! Это сработало, спасибо :) – loryruta

+0

@loryruta Проблема в том, что она перестанет работать при развертывании приложения. –

+0

Нет, это не так, поскольку я знаю, где находится файл html для любого компьютера, так как я разархивировал его из банки в указанном месте. Но в любом случае, ваш метод решения этой проблемы @James_D был лучше, спасибо :) – loryruta

0

В основном проблема заключается в том, что для работы с относительными ссылками в html вам нужен полный URL-адрес, включая схему и т. Д. URL-адрес, относящийся к текущему классу или рабочему каталогу, не будет работать.

Предполагая, что html-файл и связанное с ним изображение связаны с приложением (т. Е. Когда вы создаете файл jar для приложения, html-файл и изображение будут частью файла jar), вы можете получить URL-адрес для html-файл с

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

где путь относительно пути к классам. Затем вы можете использовать toExternalForm() для преобразования в String в соответствующем формате. Это подходит для HTML страницы справки и т.д.

Вот пример:

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

Проект:

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

Скриншот:

enter image description here

С другой стороны, если вы действительно загрузив файл HTML из файловой системы, вы может создать объект File для файла HTML, а затем преобразовать его в URI. Это было бы уместно, например, если бы вы писали HTML-редактор, в котором пользователь редактировал файл HTML и сохранял его в файловой системе, и вы хотели отобразить результат в веб-представлении; или, если вы попросите пользователя загрузить файл HTML с FileChooser.

Код для этого будет выглядеть так:

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

Это была не совсем моя проблема, так как мне пришлось загружать файл из внешней папки, но спасибо вам большое, я не знал, что можно загрузить изображение внутри банку, не распаковывая его. Я изменю код;) – loryruta

+0

В этом случае используйте код в конце ответа, который загрузит изображение из папки, указанной в аргументе, в конструктор 'File'. –

1

Я столкнулся с той же проблемой и решить ее путем изменения ссылки исходников изображений во время выполнения. Этот код будет работать при запуске внутри вашей среды IDE и при запуске приложения в файле JAR. Испытано с помощью 1.8.0_121 на Ubuntu и 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); 
    } 

Внутри вашего HTML вы должны указать изображение, используя полный путь ресурса. Вы можете использовать относительный путь, если будете осторожны с выбором YOURCLASS.

0

Во-первых, вы должны получить локальный путь к изображению в виде строки

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

Затем вы должны заменить «\» знаки с «/» в локальном пути

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

Тогда вы может печатать путь с использованием system.out.print(path), и он получит ваш локальный путь пути вашего проекта JavaFx, например D:/Projects/Java_Fx/My_Project
Если ваш файл imege в папке типа «img» использует path += "/img/";
Тогда ваш образ будет локальный путь D:/Projects/Java_Fx/My_Project/img/

Затем загрузите файл HTML, как этот

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's 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>" 

Я непосредственно загружен HTML в двигатель с прохождением «путь», прежде чем image.png и использовал одиночные кавычки везде внутри HTML код и двойные кавычки для конкатенации
<img src='file:/"+path+"image.png'>
Если вы хотите вставить изображение в качестве изображения Справочный вы можете использовать
style='background-image: url(file:/"+path+"image.png);'

Смежные вопросы