从xml中的子元素的xslt值获取img src

时间:2017-03-09 12:41:38

标签: html xml image xslt

我想使用XSLT从XML检索img源代码,但是图像源的元素是在children元素中,这导致我无法检索值。我尝试使用属性模板,但它似乎仍然无法正常工作

//  XML
<recipeImgPath>
    <imgPath>images/upload/thumbnail_1488881669_mango-avocado-salsa-recipeThumb.png</imgPath>
    <imgPath>images/upload/slider_1488881669_mango-avocado-salsa-slider.png</imgPath>
    <imgPath>images/upload/featured_1488881669_mango-avocado-salsa-featuredRecipe.png</imgPath>
    <imgPath>images/upload/background_1488881669_mango-avocado-salsa-recipeBackground.png</imgPath>
</recipeImgPath>

//    part of my XSLT code which need to get the source of image
<a href="recipe-page-1.php">
<img src="{imgPath}" alt=""/>
<div class="hover-cover"></div>
<div class="hover-icon">View Recipe</div>
</a>

2 个答案:

答案 0 :(得分:1)

我没有看到您的xslt,但您可以尝试以下样式表:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">
    <xsl:output method="xml" doctype-public="XSLT-compat" omit-xml-declaration="yes" encoding="UTF-8" indent="yes"/>
    <xsl:template match="/">
        <output>
            <xsl:apply-templates/>
        </output>
    </xsl:template>
    <xsl:template match="@*|node()">
        <xsl:copy>
            <xsl:apply-templates select="@*|node()"/>
        </xsl:copy>
    </xsl:template>
    <xsl:template match="imgPath">
        <a href="recipe-page-1.php">
            <img src="{.}" alt=""/>
            <div class="hover-cover"/>
            <div class="hover-icon">View Recipe</div>
        </a>
    </xsl:template>
</xsl:transform>

产生以下输出:

<output>
    <recipeImgPath>
        <a href="recipe-page-1.php">
            <img src="images/upload/thumbnail_1488881669_mango-avocado-salsa-recipeThumb.png" alt=""/>
            <div class="hover-cover"/>
            <div class="hover-icon">View Recipe</div>
        </a>
        <a href="recipe-page-1.php">
            <img src="images/upload/slider_1488881669_mango-avocado-salsa-slider.png" alt=""/>
            <div class="hover-cover"/>
            <div class="hover-icon">View Recipe</div>
        </a>
        <a href="recipe-page-1.php">
            <img src="images/upload/featured_1488881669_mango-avocado-salsa-featuredRecipe.png" alt=""/>
            <div class="hover-cover"/>
            <div class="hover-icon">View Recipe</div>
        </a>
        <a href="recipe-page-1.php">
            <img src="images/upload/background_1488881669_mango-avocado-salsa-recipeBackground.png" alt=""/>
            <div class="hover-cover"/>
            <div class="hover-icon">View Recipe</div>
        </a>
    </recipeImgPath>
</output>

答案 1 :(得分:0)

imgPath元素的文本简单地放入适当的href属性的另一种简单方法是

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

 <xsl:template match="recipeImgPath/imgPath">
   <a href="recipe-page-1.php">
     <img src="{text()}" alt=""/>
     <div class="hover-cover"></div>
     <div class="hover-icon">View Recipe</div>
   </a> 
 </xsl:template>

</xsl:stylesheet>

根据需要添加身份模板(或在其他答案中)以复制其他元素。