Introducción
A menudo, un Widget tendrá la necesidad de manejar imágenes.
Con solo hacer clic sobre las imágenes que contenga un Widget, el Widget Editor presentará opciones poderosas para trabajar con estas imágenes, como por ejemplo: su previsualización, hacer zoom para agrandar o achicar, seleccionar el color de una porción (para conocer su color exacto en hexadecimal), o conocer el código para incrustar dicha imagen.
Para mayor información sobre las opciones del Widget Editor, consulte Interfaz de usuario del Editor de Widgets.
Importante
El uso más común de las imágenes es que el mismo Widget las presente, sea como parte del estilo o como parte del comportamiento del Widget.
|
Seguramente, un Widget puede referenciar una ubicación externa (una URL) para desplegar una imagen (a través de un <img> y su propiedad src que enlaza a la ubicación). Bajo este enfoque, se tienen las siguientes desventajas evidentes: •No permite que el Widget sea un componente independiente, dado que siempre dependería de esa imagen en esa ubicación externa. •Implica cierta sobrecarga administrativa para el manejo de la imagen (p.e, asegurar la conectividad y su disponibilidad, o manejar los permisos del acceso). |
Se recomienda entonces que incluya la imagen dentro del Widget y la utilice en el código.
Esta sección presenta cómo incrustar esa imagen (embeberla) en el código de manera que el Widget sea un componente completamente independiente que despliega todo lo que necesita.
Incrustar una imagen
A través de la opción Incrustar esta imagen, El Editor de Widgets decodifica la imagen en bytes, de tal forma que puede usarla directamente en su código js o CSS:
|
Nótese que la primera alternativa es recomendada porque le permitirá utilizar los bytes en la propiedad data url de una hoja de estilos CSS.
A pesar de que la segunda alternativa también es válida, tenga en cuenta que el uso de img.src dentro del código js no es igual de óptimo a nivel de desempeño (p.e, especialmente cuando se usan imágenes pesadas), principalmente porque de esta manera, la imagen no queda almacenada en la caché del navegador. |
Una vez que copie el texto de la primera alternativa, utilícelo en su hoja de estilos CSS.
Por ejemplo, usted podrá tomar esa imagen como el fondo de un elemento (asignado a la clase predefinida de su CSS), así:
background:url('data:image/png;base64,[aca_los_bytes]') no-repeat;
Finalmente, en el código js de la implementación de su Widget,solo necesitará asegurarse de haber asignado esa clase que contiene la imagen al elemento HTML de su elección.
Last Updated 1/26/2022 3:49:36 PM