How to use image on include html

answered 2022-05-03 12:40:10 +0800

MDuchemin
2560 ● 1 ● 6

Hello there!

You have 2 obstacles to overcome in this case:

• 1: included HTML file is context-agnostic

when you include an html file into anything else, the content of the html file is passed to the page "as-is". If your html file contains a relative path (like the image src), it will resolve based on the URL of the resulting page.

In this case, the resulting page is login.zul, and the resulting url is server:port/context/path/to/file/login.zul

So if you add the relative path from the img on top of that, you'll get: server:port/context/path/to/file/asset/img/logos/logo-2.png, which is not the file you are trying to retrieve.

• 2: your resource files are loaded from the src/main/resources source folder.

This is not wrong, and it can even be a great way to organize your content if you are not trying to access these files directly.

In this case, there is a direct access to (at least one) of these files through the img source.

It would be easier to have this image be located in the src/main/webapps source folder, since files in this location are served directly.

If you have access to the context and you know the file path, you'd be able to load files from src/main/webapp/resources/img/... for example with a direct URL.

With the image in this location, you can change your html file in to a JSP file. JSP files are html files with extra Java-based syntax, so you don't need to change anything in the file content.

Assuming that the image is now located at:

src/main/webapp/resources/asset/img/logos/logo-2.png

You can then change the image source to <img src="${pageContext.request.contextPath}/resources/asset/img/logos/logo-2.png"

JSP will convert the ${pageContext.request.contextPath} part of the URL to match the application's context path, and direct the browser to the actual location of the image.

• Alternative option: using html in a zul file

Since the main issue that you are facing here is that html files are static, and do not have easy access to useful server-side features, you could use a zul file instead of an html file.

ZK supports the xmlns:n="native" and xmlns:x="xhtml" namespaces. https://www.zkoss.org/wiki/ZUML_Reference/ZUML/Namespaces These namespaces will let you define the xml namespace for the content of a zul file.

if you use the default setter and the zul namespace on top of that, you can have 1 zk component is a zul page that otherwise only contains html tags:

<zk xmlns:"native" xmlns:z="zul">
... your pure html content here ...
    <z:image src="~./abc/def/image.png" /> <!-- a single ZK component, which can access the resources with ~./ -->
... your pure html content here ...
</zk>

Hope that helps ;)