Comprendiendo el Esquema Data URI (RFC 2397)
Un Data URI es un esquema de URL que permite a los desarrolladores web incrustar archivos pequeños directamente en línea dentro de documentos web (HTML, CSS, JSON) como cadenas de texto, evitando peticiones HTTP adicionales.
Sintaxis Estándar de Data URI:
data:[<mediatype>][;base64],<data>
Ejemplo: data:image/png;base64,iVBORw0KGgoAAA...
Ejemplos de Implementación en Frameworks
Ejemplos de Código:
1. Etiqueta HTML de Imagen: <img src="data:image/svg+xml;base64,PHN2ZyB4..." alt="Logo" />
2. Fondo de Hoja de Estilos CSS: .icon-badge { background-image: url("data:image/png;base64,iVBORw0K..."); }
3. Componente React: const Avatar = ({ base64Str }) => <img src={`data:image/jpeg;base64,${base64Str}`} alt="User Avatar" />;
Probar Herramientas en Línea
¿Necesita convertir imágenes a Data URIs Base64? Use nuestra suite de herramientas 100% en el cliente: