html - 为什么 XSLT 文件中没有填充背景图像

Question

我有以下 XSLT:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template name="displayPano" match="/">
        <xsl:for-each select="/root">
            <xsl:variable name="imageSrc" select="imgPano/img/@src" />
            <div class="demo">
                <div id="myPano" class="pano" style="background-image: url('{imageSrc}'); background-size: auto 100%; background-position: 0px 50%; background-repeat: repeat-x;">
                <div class="controls">
                        <a href="javascript:void(0);" class="left"></a>
                        <a href="javascript:void(0);" class="right"></a>
                    </div>
                </div>
            </div>
        </xsl:for-each>
    </xsl:template>
</xsl:stylesheet>

XML:

<?xml version="1.0" encoding="UTF-8"?>
<root>
    <imgPano>
        <img src="/uploadedImages/myfolder/TEST/PANO.jpg" alt="pano image" />
    </imgPano>
</root>

ASP.net:

<CMS:ContentBlock ID="cbPano" runat="server" DefaultContentID="111111" DisplayXslt="displayPano.xsl" />

当我转到该页面时，我看到以下内容(来源):

<div id="myPano" class="pano" style="background-image: url(''); background-size: auto 100%; background-position: 0px 50%; background-repeat: repeat-x;"><div class="controls"><a href="javascript:void(0);" class="left"></a><a href="javascript:void(0);" class="right"></a></div></div>

如何解决才能正确显示背景图片。

我需要能够在页面加载时执行以下 Jquery:

<script>
        $(document).ready(function () {
            $("#myPano").pano({
                img: "{$imageSrc}"
            });
        });
    </script>

我怎样才能将它直接添加到 XSL。

Answer 1

除了在引用变量时使用 $ 之外，我建议您编写样式表

• 没有命名模板
• 没有 xsl:for-each，因为循环遍历单个元素没有意义

但您的实际问题可能更复杂，并且在某些情况下循环和命名模板实际上很有帮助。

为什么要将图像路径存储在变量中？在这个具体案例中，在我看来

style="background-image: url('{imgPano/img/@src}'); background-size: auto 100%; background-position: 0px 50%; background-repeat: repeat-x;"

也将是可读的和更直接的。

XSLT 样式表

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output indent="yes" omit-xml-declaration="yes"/>

    <xsl:template match="/root">
            <xsl:variable name="imageSrc" select="imgPano/img/@src" />
            <div class="demo">
                <div id="myPano" class="pano" style="background-image: url('{$imageSrc}'); background-size: auto 100%; background-position: 0px 50%; background-repeat: repeat-x;">
                <div class="controls">
                        <a href="javascript:void(0);" class="left"></a>
                        <a href="javascript:void(0);" class="right"></a>
                    </div>
                </div>
            </div>
    </xsl:template>
</xsl:stylesheet>

HTML 输出

<div class="demo">
   <div id="myPano"
        class="pano"
        style="background-image: url('/uploadedImages/myfolder/TEST/PANO.jpg'); background-size: auto 100%; background-position: 0px 50%; background-repeat: repeat-x;">
      <div class="controls">
         <a href="javascript:void(0);" class="left"/>
         <a href="javascript:void(0);" class="right"/>
      </div>
   </div>
</div>