0

How to use image on include html

asked 2022-05-03 09:59:01 +0800

manchen gravatar image manchen
151 2

updated 2022-05-03 11:34:06 +0800

Hi ZK,

I have a login.zul and login html(zul include html),

my img is not work on html,

How does it(html) read ZK static resources?

Tks,

Man

<zk xmlns:n="native">

<!-- Google fonts -->
<?link href="https://fonts.googleapis.com/css2?family=Jost:[email protected];400;500;600;700;800;900&display=swap" rel="stylesheet"?>

<!-- Custom Stylesheet -->
<?link type="text/css" rel="stylesheet" href="~./assets/css/style.css" ?>

<!-- External JS libraries -->
<script src="~./assets/js/jquery-3.6.0.min.js"></script>
<script src="~./assets/js/bootstrap.bundle.min.js"></script>
<script src="~./assets/js/jquery.validate.min.js"></script>
<script src="~./assets/js/app.js"></script>
<!-- Custom JS Script -->
<include mode="defer" src="~./html/login.html"/>

</zk>

and my login.html image description

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted
1

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

MDuchemin gravatar image MDuchemin
2136 1 5
ZK Team

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 ;)

link publish delete flag offensive edit

Comments

Namespaces is good solution and it works fine, thinks

manchen ( 2022-05-03 18:18:14 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2022-05-03 09:59:01 +0800

Seen: 4 times

Last updated: May 03

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More