Referencia de comando: atributos de configuración

Última actualización: 22 de julio de 2024
  • Temas:

Creado para:

  • Desarrollador
  • Usuario

Los atributos de configuración se definen como atributos directamente en un elemento IMG que administra la biblioteca de imágenes interactivas. Cada imagen puede tener su propio conjunto de atributos.

data-src

Opcional.

URL de la imagen que sirve el servicio de imágenes. Si la dirección URL no está presente, la biblioteca utiliza el valor establecido en el atributo src como alternativa. Este atributo sirve para la imagen inicial y la imagen dinámica que la biblioteca de imágenes interactivas administra desde diferentes ubicaciones.

Ejemplo

<img data-src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360,720,940">

src

Si se establece data-src, src es opcional y puede contener cualquier dirección URL que desee agregar. Por ejemplo, puede contener una URL a la misma imagen basada en el servicio de imágenes que utiliza la biblioteca. O bien, puede contener un marcador de posición de GIF o incluso un URI de datos para evitar un viaje de ida y vuelta al servidor adicional durante el inicio.

Si data-src no está establecido, src es obligatorio y debe contener una URL a la imagen que suministra el servicio de imágenes.

Ejemplo

Usando URI de datos para el atributo src y URL del servicio de imágenes para el atributo data-src:

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360,720,940">

data-breakpoints

Lista de puntos de interrupción separados por comas y, opcionalmente, seguidos de dos puntos (:) y comandos del servicio de imágenes o ajustes preestablecidos de imagen. Cada punto de interrupción es un valor de anchura de imagen definido en píxeles CSS lógicos. La biblioteca carga la imagen con el valor más grande más cercano de la lista y la reduce en el cliente para que coincida con el ancho de la imagen CSS en tiempo de ejecución. (Si trabaja en una pantalla de alta densidad, las representaciones de imágenes cargadas desde el servidor representan valores de punto de interrupción multiplicados por la proporción de píxeles del dispositivo).

Para cualquier punto de interrupción de la lista, es posible definir uno o más comandos del servicio de imágenes o nombres de ajustes preestablecidos de imagen. Estos parámetros adicionales solo se aplican a la imagen en caso de que este punto de interrupción en particular esté activo actualmente.

Puede utilizar cualquier comando de servicio de imágenes admitido, excepto los comandos de vista que afectan al tamaño de la imagen de respuesta, como wid=, hei= o scl=. La misma restricción se aplica a los ajustes preestablecidos de imagen: un ajuste preestablecido de imagen utilizado con la biblioteca de imágenes adaptables no debe contener estos comandos.

Los nombres de varios comandos del servicio de imágenes o ajustes preestablecidos de imagen se separan con el carácter " &". Si un comando del servicio de imágenes tiene una coma en su valor, dicha coma se reemplaza por %2C. Los nombres de ajustes preestablecidos de imagen están envueltos en símbolos de dólar ( $).

Ejemplos

Solo se usan puntos de interrupción

<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360,720">

Usando comandos para servicio de imágenes

<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360:op_sharpen=1,720:resMode=sharp2&op_usm=0.9%2C1.0%2C8%2C0">

Utilizando ajustes preestablecidos de imagen

<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360:$ResponsiveImage_Low$,940:$ResponsiveImage_High$">

Usar ajustes preestablecidos de imagen y comandos de servicio de imágenes

<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360:qlt=50,940:$ResponsiveImage_High$">