java 使用组件合成时，图像未包含在网页中

snvhrwxg 于 2023-01-19 发布在 Java

关注(0)|答案(1)|浏览(111)

我开始使用ZK框架，目前我正尝试从first chapters of the ZK essentials documentation在页面中显示图像，在first chapters of the ZK essentials documentation中，您可以使用来自主.zul文件index.zul的不同.zul文件的组合来创建示例UI。
主要index.zul

<?link rel="stylesheet" type="text/css" href="~./style.css"?>
<zk>
    <custom-attributes org.zkoss.zul.image.preload="true"/>
    <borderlayout hflex="1" vflex="1">
        <north vflex="min" border="none">
            <include templateURI="~./zul/banner"/>
        </north>
        <west width="260px" border="none" collapsible="true" splittable="true" minsize="300">
            <include templateURI="~./zul/sidebar.zul"/>
        </west>
        <center id="mainContent" autoscroll="true">
            <include templateURI="~./zul/main.zul"/>
        </center>
        <south border="none">
            <include templateURI="~./zul/footer.zul"/>
        </south>
    </borderlayout>
</zk>

一个分量banner.zul

<div hflex="1" sclass="banner">
    <hbox hflex="1" align="center">
        <a href="http://www.zkoss.org/">
            <image src="~./img/zklogo.png" width="90px" />
        </a>
        <div width="400px">
            <label value="Application Name" sclass="banner-head" />
        </div>
        <hbox hflex="1" vflex="1" pack="end" align="end">
            Anonymous
        </hbox>
    </hbox>
</div>

我的项目的相关文件结构如下所示：

我可以进行合成，因为我的页面实际上显示了我在组件.zul文件中定义的元素。

问题是图像没有出现。我检查了页面，图像甚至没有在页面的源代码中。
加载该页时，服务器控制台中不显示任何错误或警告。
但是，如果我直接将图像包含在index.zul中，而不是使用合成，则图像显示完美，当然，图像文件包含在页面的源代码中（您在浏览器中检查元素时看到的元素）：
修改后的index.zul：

<?link rel="stylesheet" type="text/css" href="~./style.css"?>
<zk>
    <custom-attributes org.zkoss.zul.image.preload="true"/>
    <borderlayout hflex="1" vflex="1">
        <north vflex="min" border="none">
            <image src="~./img/zklogo.png" width="90px" />
            <include templateURI="~./zul/banner"/>
        </north>
        <west width="260px" border="none" collapsible="true" splittable="true" minsize="300">
            <include templateURI="~./zul/sidebar.zul"/>
        </west>
        <center id="mainContent" autoscroll="true">
            <include templateURI="~./zul/main.zul"/>
        </center>
        <south border="none">
            <include templateURI="~./zul/footer.zul"/>
        </south>
    </borderlayout>
</zk>

现在我在页面上看到这个：