Blaze UI es un marco de código abierto de CSS. Es un conjunto de herramientas de interfaz de usuario liviano y proporciona excelentes herramientas para crear aplicaciones personalizadas y escalables. Puede funcionar con cualquier framework que exista. Puede adaptarse a cualquier ecosistema. Todos los diseños o CSS son móviles primero y, por lo tanto, receptivos. Su proyecto está disponible en código abierto, por lo que una gran comunidad lo mantiene.
Blaze UI Image es un componente de imagen que proporciona una imagen de marcador de posición si no se proporciona la imagen de origen. Es bastante útil cuando el enlace de la fuente está roto o el usuario no pudo encontrar la imagen correcta en ese momento. Además, las imágenes tienen carga diferida, lo que significa que no afectan el rendimiento. Las imágenes son proporcionadas por Unsplash.
Atributos de la imagen de la interfaz de usuario de Blaze:
- src : este atributo se utiliza para proporcionar la fuente de URL.
- alt : este atributo se utiliza para proporcionar texto alternativo a la URL de origen.
- usuario : este atributo se usa para proporcionar el nombre de usuario si no hay una URL de origen y desea filtrar por nombre de usuario.
- filtro : este atributo se utiliza para filtrar por etiquetas de imagen como colinas, automóviles, etc.
- Me gusta : este atributo es un valor booleano que pregunta si la foto seleccionada le gusta al usuario especificado.
- ancho : este atributo se utiliza para definir el ancho de la imagen.
- altura : Este atributo se utiliza para definir la altura de la imagen.
Sintaxis :
<blaze-image src="url"
width="640" height="480">
</blaze-image>
Ejemplo 1: En el siguiente ejemplo, cargamos una imagen desde la URL src .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>GeeksforGeeks | BlazeUI</title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"> </script> </head> <body> <div class="o-container"> <center> <div> <h1 style="color: green;">GeeksforGeeks</h1> </div> <strong>Blaze UI Image attributes</strong> <br /> </center> <br /> <div style="width: 320px; height: 240px; margin: auto;"> <blaze-image src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </blaze-image> </div> </div> </body> </html>
Producción:
Atributos de la imagen de la interfaz de usuario de Blaze
Ejemplo 2: En el siguiente ejemplo, cargaremos la imagen usando texto alternativo.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>GeeksforGeeks | BlazeUI</title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"> </script> </head> <body> <div class="o-container"> <center> <div> <h1 style="color: green;">GeeksforGeeks</h1> </div> <strong>Blaze UI Image attributes</strong> <br /> </center> <br /> <div style="width: 320px; height: 240px; margin: auto;"> <blaze-image width="640" height="480" filter="hills"> </blaze-image> </div> </div> </body> </html>
Producción:
Atributos de la imagen de la interfaz de usuario de Blaze
Referencia: https://www.blazeui.com/objects/images/
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA