¿Es posible cargar una imagen codificada en Base64 como imagen de background-image: url("...") pero no exponer la cadena codificada real en la fuente de la página?
Por ejemplo, tengo una API de nodo que cuando recibimos una solicitud en "/image" devuelve los datos serializados de Base64.
res.json("data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//Aw.....blah blah ¿Es posible cargar esto en la interfaz solo como una URL? Por lo tanto, la background-image muestra SOLAMENTE la URL y el texto codificado en Base64 real no está expuesto en la fuente de la página del frontend.
Entonces, si hace clic derecho y va a inspect , muestra esto:
.my-image { background-image: url("http://exampleapi.net:8080/image"); }Pero no esto:
.my-image { background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD.... etc. }Sí, pero no así, dado que solo está obteniendo el base64, el servidor no está "sirviendo" el archivo como contenido estático, pero en el lado del cliente, un base64 se puede convertir en blob y generar un URI amigable si eso funciona para usted .
const base64ToBlobUrl = async (base64Data) => { const base64Response = await fetch(base64Data); const blob = await base64Response.blob(); const blobUrl = window.URL.createObjectURL(blob); return blobUrl; } Esta función devolverá un URI que puede usar en la etiqueta <img> o en un fondo CSS en línea.