Resolve the background image url in zul file

Question

asked 2023-04-11 11:20:19 +0800

Hi everyone, I'm facing this problem, when I try to run my project in browser, It can not show image correctly, It show error can not found the watermark_full.gif

<h:table border="0" cellpadding="0" cellspacing="0" style="width:100%; height:100%; background-attachment: fixed; background-image: url('images/watermask_full.gif'); background-repeat: no-repeat; background-position: right;" bgcolor="#FBFBFE">

If it's a normal image tag, then it can show the image <image src="~./images/logo.gif" border="0"/> I can see in the browser the image show as url: localhost/zkau/web/42133cbe/images/logo.gif but the watermarkfull.gif can not resolve and just show as localhost/images/watermarkfull.gif

I change to localhost/zkau/web/42133cbe/watermark_full.gif then it can show successfully, but the point is I don't know how to make it change to that URL

Please help me

Answer 1

0

answered 2023-04-14 15:32:56 +0800

khcyt
216 ● 1 ● 1

Hi jasmine1302,

add this to your zul file.

<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>

Resolve path to background image with

url(c:encodeURL('~./images/watermask_full.gif'))

Hope it helps Kai

link publish delete flag offensive edit

Comments

I update code follow your comment , but the image still not load correctly

jasmine1302 ( 2023-04-14 16:27:31 +0800 )edit

I use the demo one https://github.com/zkoss/zkspringboot/tree/master/zkspringboot-demos/zkspringboot-demo-jar , and faced the same issue also

jasmine1302 ( 2023-04-14 16:31:30 +0800 )edit

turn out that I missed { , I update to url(${c:encodeURL('~./images/watermask_full.gif')}) then the image can show successfully, thank you very much

jasmine1302 ( 2023-04-14 16:47:14 +0800 )edit

You're right, the brackets ${} must of course be included. url(${c:encodeURL('~./images/watermask_full.gif')})

khcyt ( 2023-04-17 14:16:28 +0800 )edit

CORE FRAMEWORK

FEATURED COMPONENTS

TOOLS

EXPLORE ZK

RESOURCES

LEARN ZK

RESOURCES

GET HELP

RESOURCES

MORE ABOUT ZK

MORE ABOUT ZK

Resolve the background image url in zul file

1 Answer

Comments

Question tools

Stats

Related questions