Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Relative image paths work in JEditorPane only when the HTML document has a base URL from which to resolve them. If you load markup from a string or stream without setting a base, an image such as <img src="images/example.gif"> may appear broken. Set a suitable base on the HTMLDocument or include a valid HTML <base> element; replace the image view only when you need custom loading behavior.

Why a relative image path fails

JEditorPane delegates rendering to its installed EditorKit. For text/html, that is typically HTMLEditorKit, which supports HTML 3.2. Its HTML factory creates an ImageView for an IMG element. The view needs to resolve the image’s src against a document base.

When HTML is loaded from a URL, the resulting HTMLDocument can use that URL as its base. A relative reference such as images/example.gif is then resolved relative to the HTML document. But if you put markup into the pane with setText or read it from a stream without establishing a base, there may be no location to resolve that relative reference against. Oracle’s JEditorPane API documentation says relative references cannot be resolved unless the HTML includes a <base> tag or the HTMLDocument Base property is set.

Choose the least complex fix that fits your input

Situation Preferred approach Trade-off
HTML is served from a URL Load the page from that URL so relative references have a document location. Relative paths resolve against the page URL, which must match the layout of your images.
HTML is a string or stream and you know the image directory Set the document base, or add a valid <base> element to the HTML. You must choose a base URL that points to the correct directory.
Images need nonstandard loading behavior Install a custom HTMLEditorKit and return a custom view for IMG. You take on image-loading, failure-handling, and renderer maintenance.

Set a base URL for string or stream content

Use a real URL as the base, typically the directory that contains the referenced images. For local files, a file URL can identify that directory; for web content, use the page’s URL or an appropriate asset directory. Set the base before the pane renders the document. The same rule applies whether you use the document’s Base property or a <base href="..."> element in the HTML.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

For example, if the base is the directory file:/app/resources/, then src="images/logo.png" refers to file:/app/resources/images/logo.png. If the base instead points to the parent directory or a different location, the relative path will resolve somewhere else and can still fail. Use a valid URL rather than an arbitrary filesystem string.

Oracle documents the related loading routes—setText, read, and setPage—in the JEditorPane API. When choosing among them, the important distinction for relative images is whether the HTMLDocument has a base, not merely which method loaded the markup.

Use a custom image view only when base resolution is not enough

Rob Kenworthy’s 2001 InfoWorld Java Tip 109 describes an alternative: copy and adapt the image-view logic, creating a MyImageView that handles relative sources with Toolkit.getDefaultToolkit().createImage(src), while retaining URL loading for sources such as file and http. The article’s original problem was that an image could display with an absolute file: URL but not with a relative src when the markup had no base. Its implementation is a historical workaround, not a requirement for ordinary relative paths when a document base can be set. See the original InfoWorld Java Tip 109.

Make the custom factory replace only IMG rendering

Define a class extending HTMLEditorKit and supply an HTMLFactory subclass. In the factory’s create(Element elem) method, return new MyImageView(elem) when the element’s name is HTML.Tag.IMG. For all other elements, call the superclass implementation. Install the kit on the pane with editor.setEditorKit(new MyHTMLEditorKit()). This preserves the standard renderer for the rest of the document.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Handle image readiness and failure

createImage may return before image pixels are available. Kenworthy’s implementation waits for image production to reach a terminal or usable state by checking ERROR, ABORT, ALLBITS, and FRAMEBITS. A custom view must account for loading still in progress and for failure; otherwise it can attempt to display an image before it is ready or wait indefinitely. The article’s polling approach reflects its period and should be treated as code to adapt carefully rather than a general substitute for document-base handling.

Inserting markup into an existing document

The tutorial also shows an insertHTML helper based on HTMLEditorKit.read and a Document, so new markup can be inserted without replacing all existing content. In this case, ensure the target HTML document has the correct base as well; inserting markup does not automatically give relative image paths a location. The tutorial’s copied resource-loading code for a broken-image icon also requires that the icon resource be reachable through the application’s resource path.

Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Keep Swing updates on the event-dispatch thread

Swing components and their documents are not thread safe. Follow the Swing threading policy when creating or updating the pane and its document; do not perform concurrent document mutations from arbitrary background threads. Oracle’s JEditorPane documentation covers the component’s loading and threading context. The relevant renderer and document classes are HTMLDocument and HTMLEditorKit.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.