2

Estoy intentando mostrar una imagen sacada del servidor mysql para mostrarla en mi web generando un xml y creando una tabla con javascript.

Tengo un getNoticia.php donde me comunico con el servidor:

 <?php

// Configuración BASE DE DATOS MYSQL
$servidor  = "localhost";
$basedatos = "BDNoticias";
$usuario   = "root";
$password  = "";

// Creamos la conexión al servidor.
$conexion = mysqli_connect($servidor, $usuario, $password,$basedatos) or die(mysqli_error($conexion));
mysqli_set_charset($conexion,"utf8");

// Consulta SQL para obtener los datos de los centros.
$sql = "SELECT * FROM noticias";
$resultados = mysqli_query($conexion,$sql);

$XML ='<?xml version="1.0" encoding="UTF-8"?>';
$XML .='<datos>';

while ($fila = mysqli_fetch_array($resultados)) {
    $XML .='<documento>';
        $XML .='<idnotici>'.$fila["idnoticia"].'</idnotici>';
        $XML .='<titul>'.$fila["titulo"].'</titul>';
        $XML .='<descripcio>'.$fila["descripcion"].'</descripcio>';
        $XML .='<auto>'.$fila["autor"].'</auto>';
        $XML .='<fech>'.$fila["fecha"].'</fech>';
        $XML .='<img>'.base64_encode($fila["imagen"]).'</img>';
    $XML .='</documento>';
}

$XML .='</datos>';

// Cabecera de respuesta indicando que el contenido de la respuesta es XML
header("Content-Type: text/xml");
// Para que el navegador no haga cache de los datos devueltos por la página PHP.
header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');

echo $XML;

mysqli_close($conexion);
?>

Si elimino el base64_encode() del tag me aparecen montones de caracteres "?" por consola que me dan el error y no me muestra nada. Si no lo quito me muestra en la tabla una línea larguísima de caracteres que me imagino que es la imagen.

en teoría esta línea mysqli_set_charset($conexion,"utf8"); esta bien por lo que entiendo que el problema viene con el encode de la imagen.

Sin base64_encode():

sin

Con base64_encode():

con

Para mostrar los datos utilizo esta función en js:

            function construirListado(oXML) 
           {
            // Crear tabla
            var oTabla = document.createElement("table");
            oTabla.border = "3";
            var oTHead = oTabla.createTHead();
            var oFila = oTHead.insertRow(-1);
            
            var oTH = document.createElement("TH");
            oTH.textContent = "IDNoticia";
            oFila.appendChild(oTH);
            
            oTH = document.createElement("TH");
            oTH.textContent = "Título";
            oFila.appendChild(oTH);

            oTH = document.createElement("TH");
            oTH.textContent = "Autor";
            oFila.appendChild(oTH);

            oTH = document.createElement("TH");
            oTH.textContent = "Fecha";
            oFila.appendChild(oTH);
            
            /*
            oFila = oTHead.insertRow(-1);
            oTH = document.createElement("TH");
            oTH.textContent = "Descripción";
            oFila.appendChild(oTH);*/
                        
            var oTBody = oTabla.createTBody();      
            var oPersonas = oXML.querySelectorAll("documento");
            for (var i = 0; i < oPersonas.length; i++) {
                oFila = oTBody.insertRow(-1);

                var oCelda = oFila.insertCell(-1);
                oCelda.textContent = oPersonas[i].querySelector("idnotici").textContent;

                oCelda = oFila.insertCell(-1);
                oCelda.textContent = (oPersonas[i].querySelector("titul").textContent);                            
            
                oCelda = oFila.insertCell(-1);
                oCelda.textContent = (oPersonas[i].querySelector("auto").textContent);

                oCelda = oFila.insertCell(-1);
                oCelda.textContent = (oPersonas[i].querySelector("fech").textContent);
                    
                oFila = oTBody.insertRow(-1);
                oFila = oTBody.insertRow(-1);
                oCelda = oFila.insertCell(-1);
                // Combina para ocupar toda la fila
                oCelda.colspan = 4;             
                oCelda.textContent = (oPersonas[i].querySelector("descripcio").textContent);
                
            
                oCelda = oFila.insertCell(-1);      
                oCelda.textContent = (oPersonas[i].querySelector("img").textContent);
                    
            }
            document.querySelector("#listado").innerHTML = "";
            document.querySelector("#listado").appendChild(oTabla);
        
}
4
  • 1
    Para empezar, esa no es la manera correcta de crear un XML en PHP ya que no estás usando entidades HTML que impidan el cierre de etiquetas XML. Además, no es bueno que introduzcas archivos o imágenes en la base de datos. Es más eficiente que estén en el sistema de archivos. Por otro lado, estás introduciendo el contenido de la etiqueta <img> como texto en una celda de la tabla, en vez de meterlo en el href de una etiqueta <img>. Commented el 22 jul. 2021 a las 11:52
  • Aunque no sea buena práctica añadir imágenes en la base de datos necesito saber hacerlo para conocer su funcionamiento y aprender posibles errores que puedan surgir.
    – John Doe
    Commented el 22 jul. 2021 a las 14:46
  • A parte si realizo un bucle para crear la tabla, como hago para que inserte una imagen distinta por cada noticia?
    – John Doe
    Commented el 22 jul. 2021 a las 15:04
  • Redactando respuesta... Commented el 22 jul. 2021 a las 21:25

1 respuesta 1

1

Código PHP

Tu código no genera un XML correcto ya que no usas htmlspecialchars() al crear un XML manualmente, por lo que cualquier carácter que pueda interferir en el formato XML lo romperá, lo podría alterar o podrían inyectar código indeseado en él.

Aún así te sugiero que uses DOM para crear documentos XML en PHP.

Aquí tienes un ejemplo de cómo adaptar tu código a DOM:

<?php
/* Indicamos el tipo de datos que enviaremos */
header("Content-type: text/xml");

/* Creamos el documento XML */
$dom = new DOMDocument('1.0', 'utf-8');

/* Creamos el nodo raíz y lo agregamos al documento XML*/
$datos = $dom->createElement('datos');
$dom->appendChild($datos);

/* Aquí realizas la consulta SQL */

while ($fila = mysqli_fetch_array($resultados)) {
    /* Creamos el elemento "documento" donde almacenaremos los valores de cada iteración */
    $documento = $dom->createElement('documento');
    /* Creamos y agregamos los elementos al nodo "documento" */
    $documento->appendChild($dom->createElement('idnotici', $fila['idnoticia']));
    $documento->appendChild($dom->createElement('titul', $fila['titulo']));
    $documento->appendChild($dom->createElement('descripcio', $fila['descripcion']));
    $documento->appendChild($dom->createElement('auto', $fila['autor']));
    $documento->appendChild($dom->createElement('fech', $fila['fecha']));
    /* Codificamos en BASE64 la imagen ya que los datos binarios en CDATA no son compatibles con utf-8 */
    $documento->appendChild($dom->createElement('img', base64_encode($fila['imagen'])));
    /* En caso de serlo sería así */
    /*$documento
        ->appendChild($dom->createElement('img'))
        ->appendChild($dom->createCDATASection($fila['imagen']));*/
    /* Agregamos el elemento "documento" al elemento raíz "datos" */
    $datos->appendChild($documento);
}

/* Enviamos el XML al navegador */
echo $dom->saveXML();

Código javascript

Una vez generado correctamente el XML estamos en disposición de leerlo en la página web usando cualquier tecnología disponible para ello, como XMLHttpRequest o fetch.

Supongamos que lo hacemos haciendo uso de fetch:

fetch('tu_script.php')
    .then(respuesta => respuesta.text())
    .then(texto => (new window.DOMParser()).parseFromString(texto, "text/xml"))
    .then(xml => {
        console.log(xml);
        construirListado(xml);
    });

Ahora tu función tendrá como entrada el XML obtenido de tu script PHP, por lo que solo resta generar una imagen a partir de los datos BASE64 enviados en el XML:

oCelda = oFila.insertCell(-1);

/* Creamos la imagen */
var imagen = document.createElement('img');
imagen.src = "data:image/jpeg;base64," + (oPersonas[i].querySelector("img").textContent)

/* Agregamos el elemento "<img>" creado dentro de la celda */
oCelda.appendChild(imagen);

Recursos usados para reproducir este problema:

2
  • Gracias, funcionó tal como quería, la verdad que tengo que profundizar más en el tema del DOM, se me ocurrían formas mucho más complejas de hacerlo y algunas partes que pusiste ni sabia que se podían poner así. De nuevo, gracias!
    – John Doe
    Commented el 23 jul. 2021 a las 10:33
  • 1
    Si no vas a usar las características de definición de tipos de datos, formato, estructura del documento, etc, quizá te sea más sencillo usar JSON en su lugar. Es el método más eficiente de comunicar aplicaciones del servidor con Javascript que se ejecuta en el navegador del cliente. Commented el 23 jul. 2021 a las 12:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.