I need to view images from a folder

Question

My xml below:

<?xml version='1.0' encoding='UTF-8' ?> 
<?xml-stylesheet type="text/xsl" href="celular.xsl"?>
<!DOCTYPE produtos [
    <!ELEMENT produtos (produto+)>
    <!ELEMENT produto (nome,descricao+,preco,imagem,tipo,marca)>
    <!ELEMENT nome (#PCDATA)>
    <!ELEMENT descricao (#PCDATA)>
    <!ELEMENT preco (#PCDATA)>
    <!ELEMENT imagem (#PCDATA)>
    <!ELEMENT tipo (#PCDATA)>
    <!ELEMENT marca (#PCDATA)>
]>
<produtos>
    <produto>
        <nome>Smartphone Moto G 5G</nome>
        <descricao>Smartphone Moto G 5G 128GB Dual Chip Android 10 Tela 6.7" Qualcomm Snapdragon 750 Câmera tripla 48MP + 8MP + 2MP Frontal 16MP - Preto Prisma</descricao>
        <descricao>Celular de última geração da Motorola, ótimo para trabalhar, navegar e jogar.</descricao>
        <preco>2799.00</preco>
        <imagem>MotoG5g.jpg</imagem>
        <tipo>celular</tipo>
        <marca>Motorola</marca>
    </produto>
    <produto>
        <nome>Celular LG B220 Dual</nome>
        <descricao>Celular LG B220 Dual - Desbloqueado - Preto</descricao>
        <preco>139.99</preco>
        <imagem>lgb220.jpg</imagem>
        <tipo>celular</tipo>
        <marca>LG</marca>
    </produto>
    <produto>
        <nome>Samsung Galaxy A10s</nome>
        <descricao>Smartphone Samsung Galaxy A10s Dual Chip Android 9.0 Tela 6.2” Octa-Core 32GB 4G Câmera 13MP+2MP - Azul</descricao>
        <preco>929.07</preco>
        <imagem>samsungA10s.jpg</imagem>
        <tipo>celular</tipo>
        <marca>Samsung</marca>
    </produto>
    <produto>
        <nome>Nokia 2.3</nome>
        <descricao>Smartphone Nokia 2.3 Dual Chip Android Tela 6.2" 32GB 4G Câmera 13MP +2MP - Verde Ciano</descricao>
        <preco>899.00</preco>
        <imagem>nokia23.jpg</imagem>
        <tipo>celular</tipo>
        <marca>Nokia</marca>
    </produto>
    <produto>
        <nome>iPhone 11 Pro Max</nome>
        <descricao>iPhone 11 Pro Max 64GB Verde Meia-Noite 6.5" iOS 4G + Wi-Fi Câmera 12MP - Apple</descricao>
        <preco>7055.10</preco>
        <imagem>iphone11promax.jpg</imagem>
        <tipo>celular</tipo>
        <marca>Apple</marca>
    </produto>
    <produto>
        <nome>Notebook Acer Aspire 3 A315-56-35ET</nome>
        <descricao>Notebook Acer Aspire 3 A315-56-35ET 10ª Intel Core i3 8GB 512GB SSD W10 15,6''</descricao>
        <preco>3199.99</preco>
        <imagem>AcerAspire3.jpg</imagem>
        <tipo>notebook</tipo>
        <marca>Acer</marca>
    </produto>
    <produto>
        <nome>Notebook Ultrafino Lenovo Ideapad S145</nome>
        <descricao>Notebook Ultrafino Lenovo Ideapad S145 Intel Core i3-8130U 8GB 1TB 15.6" W10 - Prata</descricao>
        <preco>2759.99</preco>
        <imagem>LenovoIdeapad.jpg</imagem>
        <tipo>notebook</tipo>
        <marca>Lenovo</marca>
    </produto>
    <produto>
        <nome>Notebook Gamer 2AM E550</nome>
        <descricao>Notebook Gamer 2AM E550 Intel Core I7 8GB (GeForce GTX 1050 com 3GB) 256GB SSD IPS Full HD 15,6" Freedos Cinza Escuro</descricao>
        <descricao>Notebook gamer com o melhor custo/benefício da categoria.</descricao>
        <preco>5599.99</preco>
        <imagem>NotebookGamer2AM.jpg</imagem>
        <tipo>notebook</tipo>
        <marca>2AM</marca>
    </produto>
    <produto>
        <nome>Notebook Positivo Motion Q464B</nome>
        <descricao>Notebook Positivo Motion Q464B Intel Atom Quad core 4GB 64GB SSD + 64GB Nuvem 14" W10 Vermelho</descricao>
        <preco>1449.99</preco>
        <imagem>NotebookPositivo.jpg</imagem>
        <tipo>notebook</tipo>
        <marca>Positivo</marca>
    </produto>
    <produto>
        <nome>Notebook Compaq Presario CQ-25</nome>
        <descricao>Notebook Compaq Presario CQ-25 Intel Pentium 4GB 120GB SSD 14''</descricao>
        <preco>1599.99</preco>
        <imagem>NotebookCompaq.jpg</imagem>
        <tipo>notebook</tipo>
        <marca>Compaq</marca>
    </produto>
    <produto>
        <nome>Tablet Samsung Galaxy A7</nome>
        <descricao>Tablet Samsung Galaxy A7 64GB Wi-Fi 4G Tela 10.4" - Octa-Core 2.0GHz - Grafite</descricao>
        <preco>1439.10</preco>
        <imagem>GalaxyA7.jpg</imagem>
        <tipo>tablet</tipo>
        <marca>Samsung</marca>
    </produto>
    <produto>
        <nome>Tablet Positivo Twist Tab T770B</nome>
        <descricao>Tablet Positivo Twist Tab T770B 32GB Wi-Fi Tela 7" Android QuadCore de 1,5 GHz - Cinza Escuro</descricao>
        <preco>399.00</preco>
        <imagem>PositivoTwistTab.jpg</imagem>
        <tipo>tablet</tipo>
        <marca>Positivo</marca>
    </produto>
    <produto>
        <nome>Tablet Ptb7qsg 3g Philco</nome>
        <descricao>Tablet Ptb7qsg 3g Philco, Android 8.1 E Tela Multi-toque</descricao>
        <preco>449.99</preco>
        <imagem>TabletPtb7qsg.jpg</imagem>
        <tipo>tablet</tipo>
        <marca>Philco</marca>
    </produto>
    <produto>
        <nome>Tablet Multilaser M7 3G Plus NB304</nome>
        <descricao>Tablet Multilaser M7 3G Plus NB304,Preto,Tela 7,Dual Chip,Wi-fi+3G,Bluetooth,Câm traseira 2MP e 16GB</descricao>
        <preco>494.10</preco>
        <imagem>MultilaserM7.jpg</imagem>
        <tipo>tablet</tipo>
        <marca>Multilaser</marca>
    </produto>
    <produto>
        <nome>Tablet Samsung Galaxy Tab S5e</nome>
        <descricao>Tablet Samsung Galaxy Tab S5e 64GB Wi-Fi 4G Tela 10.5" Android Octa-Core 2.0GHz - Prata</descricao>
        <preco>2499.00</preco>
        <imagem>GalaxyTabS5e.jpg</imagem>
        <tipo>tablet</tipo>
        <marca>Samsung</marca>
    </produto>
</produtos>

My xsl below:

<?xml version='1.0' encoding='UTF-8' ?> 
<!-- was: <?xml version="1.0" encoding="UTF-8 " ?> -->
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" doctype-public="-//W3C//DTD HTML 4.01 Transitional//EN"/>

  <!-- http://erikasarti.com/html/dingbats-simbolos-desenhos/ -->
  <xsl:template match="/">
    <html>

<head>
    <title>Galeria de Produtos - Celular</title>
    <style>
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }

        li {
            float: left;
        }

        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover:not(.active) {
            background-color: #111;
        }

        .active {
            background-color: #4CAF50;
        }

        /*
        div.gallery {
            margin: 5px;
            border: 1px solid #ccc;
            float: left;
            width: 180px;
        }

        div.gallery:hover {
            border: 1px solid #777;
        }

        div.gallery img {
            width: 100%;
            height: auto;
        }

        div.desc {
            padding: 15px;
            text-align: center;
        }
    */
        * {
            box-sizing: border-box;
        }

        body {
            background-color: #f1f1f1;
            padding: 20px;
            font-family: Arial;
        }

        /* Center website */
        .main {
            max-width: 1000px;
            margin: auto;
        }

        h1 {
            font-size: 50px;
            word-break: break-all;
        }

        .row {
            margin: 8px -16px;
        }

        /* Add padding BETWEEN each column */
        .row,
        .row>.column {
            padding: 8px;
        }

        /* Create four equal columns that floats next to each other */
        .column {
            float: left;
            width: 25%;
        }

        /* Clear floats after rows */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        /* Content */
        .content {
            background-color: white;
            padding: 10px;
        }

        /* Responsive layout - makes a two column-layout instead of four columns */
        @media screen and (max-width: 900px) {
            .column {
                width: 50%;
            }
        }

        /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
        @media screen and (max-width: 600px) {
            .column {
                width: 100%;
            }
        }

        .btn {
            border: none;
            /* Remove borders */
            color: white;
            /* Add a text color */
            padding: 14px 28px;
            /* Add some padding */
            cursor: pointer;
            /* Add a pointer cursor on mouse-over */
        }

        .danger {
            background-color: #f44336;
        }

        /* Red */
        .danger:hover {
            background: #da190b;
        }
        .source {
        
    </style>
</head>

<body>
    <ul>
        <li><a class="active" href="celular.xml">Celular</a></li>
        <li><a href="notebook.xml">Notebook</a></li>
        <li><a href="tablet.xml">Tablet</a></li>
        
    </ul>

  <div class="row">
<xsl:for-each select="produtos/produto[tipo='celular']">
<xsl:sort select="nome"/>
        <div class="column">
 

            <div class="content">                
   <xsl:value-of select="imagem"/>
    
       
        <img src="{imagens}"></img>
    
        
       

 


<h2>
              <font face="arial" size="4">
                <xsl:value-of select="nome"/>
                
              </font>
            </h2>

<h4>
Marca: 
<xsl:value-of select="marca"/> 

</h4> 
   
       <h4> 
Preço:R$ 

<xsl:value-of select="preco" /> 

<xsl:if test="preco&lt;=500">
<p><button class="btn danger">Promoção</button></p> 
</xsl:if>
    </h4>
       
     <xsl:for-each select="descricao">
<xsl:value-of select="text()" />      
<br />
<br />
</xsl:for-each>
 </div>
 
</div>
  </xsl:for-each>

</div>
 
</body>

</html>

  </xsl:template>
</xsl:stylesheet>