为什么 JEditorPane 不显示用 HTML 编写的图像？答案

【问题标题】：Why JEditorPane does not show image written in HTML?为什么 JEditorPane 不显示用 HTML 编写的图像？
【发布时间】：2015-01-03 21:42:51
【问题描述】：

所以我的 HTML 是这样的。

<!DOCTYPE HTML>
<html>
<body >
<h1 style="background-color:lightblue">This is a h1</h1>
<img src="haha.jpg" alt="W3Schools.com" width="104" height="142" > 
</p>
</body>
</html>

这是我加载 HTML 的方式：

JEditorPane je = new JEditorPane();
je.setEditable(false);
je.setContentType("text/html");
FileReader fr = new FileReader("testPage.html");
BufferedReader br = new BufferedReader(fr);
String text = "";
String inputLine = br.readLine();
while(inputLine!=null){
    text += inputLine+"\n";
    inputLine=br.readLine();
}
je.setText(text);
SwingNode sn = new SwingNode();
sn.setContent(je);

h1 部分完美运行，但图像部分不显示，显示在 .html 文件中。所以我想知道是否有任何方法可以显示 HTML 中的图像？如果JEditorPane 做不到，还有什么组件会显示html WITH 图片？

帮助表示赞赏。

【问题讨论】：

可能是因为它找不到图像，与运行它的代码相关，它存储在哪里？
我使用了绝对文件路径。在运行期间，JEditorPane 为图像节省了空间，但图像只是损坏了....
可能重复How should HTML for Java components reference resources?
@AndrewThompson 但是没有嵌入式资源？
BTW - <h1 style="background-color:lightblue">This is a h1</h1> Java（HTML 渲染）不理解 lightblue。改用#DDDDFF。

标签： java html swing javafx jeditorpane

【解决方案1】：

由于您使用的是SwingNode，因此您的应用程序实际上使用了 JavaFX。

JavaFX 有一个 Web 浏览器组件，您可以在此处阅读更多信息：

Overview of the JavaFX WebView Component

这里有一个简短的例子如何使用它：

WebView browser = new WebView();
WebEngine webEngine = browser.getEngine();
webEngine.load(url);

url 可以是"http://example.com" 之类的地址，也可以指向文件或资源，例如：

Paths.get("testPage.html").toURI().toURL();

如果您的 HTML 内容为 String，您可以像这样加载它：

String htmlContent = "<html>....</html>";
browser.getEngine().loadContent(htmlContent);

如果你想在htmlContent中插入图片，你可以这样做：

URL url = Main.class.getResource("haha.jpg"); // haha.jpg is next to Main class
String text = "<html><img src=\"" + url + "\" width=\"104\" height=\"142\" > </html>";

或者，如果您想在计算机上插入指向固定文件的图像，请像这样创建url：

URL url = new File("C:/images/haha.jpg").toURI().toURL();

或者：

URL url = Paths.get("C:/images/haha.jpg").toUri().toURL();

【讨论】：

还是不行。我用 browser.getEngine().loadContent(text);图片未成功加载。
...我明白了，在我在 html 文件中使用了相对路径之后。！但是为什么当我在 html 文件中使用绝对路径时它不起作用，例如
@Yvainovski 很可能是因为您遗漏了一个冒号："file:/c:/bla/bla/bla/haha.jpg" 是new File("c:/bla/bla/bla/haha.jpg").toURI().toURL().toString() 的结果。
另外，当我使用（我们是 WebEngine）we.loadContent(text);它只显示图像的边缘。为什么？
@Yvainovski WebEngine.loadContent() 需要一个 HTML 字符串，而不是 URL！如果您有地址（网址），请使用WebEnigne.load(url)。

【解决方案2】：

我将图像复制到执行程序的同一工作目录中，并使用以下 HTML...

<!DOCTYPE HTML>
<html>
    <body >
        <h1 style="background-color:lightblue">This is a h1</h1>
        <img src="haha.jpg" alt="W3Schools.com" width="104" height="142" > 
    </p>
</body>
</html>

还有代码……

import java.awt.EventQueue;
import java.io.File;
import java.net.URL;
import java.util.Dictionary;
import java.util.Hashtable;
import javax.imageio.ImageIO;
import javax.swing.JEditorPane;
import javax.swing.JFrame;
import javax.swing.JScrollPane;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;

public class TestEditor {

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

    public TestEditor() {
        EventQueue.invokeLater(new Runnable() {
            @Override
            public void run() {
                try {
                    UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
                } catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
                    ex.printStackTrace();
                }

                JEditorPane editor = new JEditorPane();
                try {
                    editor.setPage(new File("testPage.html").toURI().toURL());
                } catch (Exception exp) {
                    exp.printStackTrace();
                }

                JFrame frame = new JFrame("Testing");
                frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                frame.add(new JScrollPane(editor));
                frame.pack();
                frame.setLocationRelativeTo(null);
                frame.setVisible(true);
            }
        });
    }

}

能够让它毫无问题地运行......

将图像放在程序执行上下文中的相对位置（“.”）

【讨论】：

我正在使用 JavaFX。当我改为使用 editor.setPage(new File("testPage.html").toURI().toURL());它显示了一个质量。
那你为什么要使用JEditorPane？
如果您使用的是JavaFX，那么为什么不使用WebView？
@Yvainovski 考虑提供一个runnable example 来证明您的问题。这将导致更少的混乱和更好的响应