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()
:
Con base64_encode()
:
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);
}
<img>
como texto en una celda de la tabla, en vez de meterlo en elhref
de una etiqueta<img>
.