Error in XML formatting caused by adding an image

Question

Error in XML formatting caused by adding an image

Here is the XML code I am working with:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="staff.xsl"?>
<st>        
    <employee>
        <name>
            <firstname>Clay</firstname>
            <lastname>Hansen</lastname>
        </name>

        <jobtitle>Professor</jobtitle>

        <department>Department: Communication and Marketing</department>
        <office>Office: CH-H 111</office>
        <phone>Phone: (847)257-1234</phone>
        <email>Email: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee8d828f97c086ae8f8c8dc08d818dc380">[email protected]</a></email>
        <profile>
            <html xmlns="http://www.w3.org/1999/xhtml">
                <img src="C:\Users\username\Desktop\im.jpg" />                                                                           
            </html>
        </profile>
    </employee>
</st>

https://i.sstatic.net/q2uvl.png I have encountered an issue where adding an image to my XML causes the data not to be displayed in a tabular form, but rather as words in a sentence. How can I go about solving this problem?

html css xml xslt

Answer 1

Answer №1

The reason behind this is that xsl:value-of retrieves the text nodes of an element's subtree without any markup (in this case, there isn't any). If you want to duplicate the img node, you can do so with the following code:

<xsl:for-each select="employee">
   <td>
       <xsl:copy-of select="profile//xhtml:img"></xsl:copy-of>
   </td>
</xsl:for-each>

Just remember to specify the xhtml namespace in your stylesheet to work with the img nodes:

xmlns:xhtml="http://www.w3.org/1999/xhtml"

Answer 2

The reason behind this is that xsl:value-of retrieves the text nodes of an element's subtree without any markup (in this case, there isn't any). If you want to duplicate the img node, you can do so with the following code:

<xsl:for-each select="employee">
   <td>
       <xsl:copy-of select="profile//xhtml:img"></xsl:copy-of>
   </td>
</xsl:for-each>

Just remember to specify the xhtml namespace in your stylesheet to work with the img nodes:

xmlns:xhtml="http://www.w3.org/1999/xhtml"

Error in XML formatting caused by adding an image

Answer №1

Similar questions

Say goodbye to using 'jQuery .load()' with <img> elements inside <a> tags

Misunderstandings between HTML and CSS

Trouble with achieving equal height columns in nested flexbox layout on Google Chrome

Using ngFor to render elements in several table rows

I am in search of a specialized 3D camera with a unique effect

Using the HTML5 time element to include milliseconds in a form

Custom plugin shortcode HTML appearing within WordPress Edit Page interface

Automatically expanding PrimeNG Turbotable rows

jQuery not triggering when selecting items from dropdown list

Why is my CSS causing a div with 100% width to be slightly taller than expected?

What method is used to determine Muslim prayer times in an android app?

Is there a way to dynamically update CSS based on user input in ASP Razor?

Repeating linear gradients in the background

Issue with Bootstrap Carousel displaying as a static image instead of a slide

Ways to enhance the sharpness of an image when using transform scale

What is the best way to automatically direct users to their profile page after logging in?

AngularJs - Show the response only upon verifying the correct answer

Angular - Applying styles to child components when parent components are hovered over

What is the jQuery plugin that can search for elements and display them in real-time within a DIV?

PHP's 'importStyleSheet' function is a useful tool