0
225
VistasCómo mostrar una imagen base64 que está dentro de un archivo .txt en el img src
A continuación se muestra mi etiqueta img, como puede ver, el src es un archivo .txt
<img id="loading" src="assets/images/loader_gif.txt" alt="Red dot" /> A continuación se muestra el valor de loader_gif.txt, es una imagen base64. 
El problema es que la imagen no se muestra si lo hago así. Pero si pongo directamente toda la base64 en el src, mostrará la imagen.
¿Hay algo que me estoy perdiendo?
2 Respuestas
Responde la pregunta0
Un .txt no es un formato admitido para usar directamente como un origen de imagen, por lo que no es posible.
Si el contenido dentro de su .txt no cambia, recomendaría usar directamente el base64 como una imagen src. Ya dijiste que lo hiciste (que está funcionando), así que solo para aquellas personas que no saben cómo usar base64 como image src. aquí hay un ejemplo
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" />Sin embargo, para usar el archivo txt, debe cargar el archivo a través de Javascript, obtener el contenido del archivo y agregar el base64 como una imagen src.XMLHttpRequest sería una forma de obtener los contenidos.
const client = new XMLHttpRequest(); // instead of foo.txt you need to add your .txt file of course client.open('GET', '/foo.txt'); client.onreadystatechange = () => { // Make sure the request was done if (client.readyState === XMLHttpRequest.DONE) { const status = client.status; // make sure the request ended up successfully if (status === 0 || (status >= 200 && status < 400)) { // If request was successful, grab the base64 from the response const base64Image = client.responseText; console.log(base64Image); // add the base64 as image src const image = document.querySelector('#loading'); image.src = base64Image; } else { // In case the request to get the .txt content failed, you can do something else. // For example add a static fallback image } } } client.send();Una nota adicional: puede haber casos en los que la potencia de procesamiento del lado del cliente o del servidor sea (o incluso de ambos) muy baja. Por ejemplo en teléfonos de gama baja o alojamiento web compartido. Entonces, debe saber que podría tomar un tiempo hasta que se muestre la imagen, ya que todos esos pasos deben ejecutarse primero:
- obtener contenido HTML de la página (aquí se muestra una imagen vacía/rota ya que aún no se ha configurado src)
- javascript necesita ser analizado y ejecutado
- se ejecutará HttpRequest
- el servidor necesita responder con el contenido de su txt
- JS necesita agregar la imagen src
Entonces, para no tener una imagen rota o parpadeante mientras se realiza la carga de la imagen, puede entregar una imagen de marcador de posición directamente en html. Algo que es pequeño en tamaño de archivo y estático. Tan pronto como image.src = base64Image; funciona, sería reemplazado.
Pero en su caso, dice "loader_gif", así que supongo que ya es para alguna acción de carga. Tener una imagen de marcador de posición hasta que se cargue una imagen de cargador a través de Javascript parece un poco "exagerado" para una acción de carga.
0
Su caso de uso no es muy diferente a que el navegador cargue la imagen real tal como lo hace con cualquier otro recurso. Supongo que ya ha considerado tener la imagen como una imagen real.
Debido a que la imagen no es realmente una imagen, debe administrar eso. En su caso, está "casi" en formato de imagen, por lo que el procesamiento es mínimo, lo que significa que solo necesita obtener los datos del archivo y configurarlos en el src del elemento de imagen.
<body> <img id="loading" alt="Red dot" /> <script> fetch('/assets/images/loader_gif.txt').then(response => response.text()) .then(b64img => { document.getElementById('loading').src = b64img; }) </script> </body>