Las imágenes importadas se representan como estáticas en lugar de como recursos adaptables en AEM Edge Delivery Services

En Adobe Experience Manager (AEM) Edge Delivery Services, las imágenes importadas en las páginas se pueden procesar como imágenes estáticas en lugar de como recursos interactivos de Dynamic Media. Como resultado, las imágenes no se benefician de las funciones de Dynamic Media, como la generación automática de varios tamaños o transformaciones de imagen. Para solucionar este problema, genere un marcado de imagen interactivo con las direcciones URL de entrega de los AEM Assets admitidos.

Descripción description

Entorno

  • Adobe Experience Manager (AEM) Edge Delivery Services
  • AEM Cloud Service

Problema/Síntomas

  • Las imágenes importadas en páginas se representan como imágenes estáticas en lugar de como recursos interactivos de Dynamic Media.
  • Las imágenes no se benefician de las funciones de Dynamic Media, como la generación automática de varios tamaños o transformaciones de imagen.
  • Este problema suele ocurrir durante las migraciones automatizadas, en las que las referencias de imagen se rellenan mediante programación.
  • No aparece ningún mensaje de error, pero las imágenes no muestran un comportamiento interactivo.

Resolución resolution

Siga los pasos a continuación para resolver el problema.

  1. Asegúrese de que las imágenes se carguen o resuelvan como AEM Assets aprobados en la instancia de AEM Cloud Service.

  2. Para cada imagen, obtenga la URL de entrega de los AEM Assets admitidos. Para ello, utilice la API abierta de Assets o resuelva el recurso a través de su jcr:uuid y recupere la dirección URL de envío.

  3. Actualice el importador o la lógica de bloque EDS para generar un marcado de imagen interactivo mediante la dirección URL de entrega de AEM Assets. Incluya parámetros de anchura, recorte, formato y calidad para habilitar las transformaciones de Dynamic Media.

    Ejemplo de marcado de imagen adaptable:

    code language-none
    <img src="https://assets.example.com/asset-id.jpg?width=800&format=webp&quality=80"
    srcset="https://assets.example.com/asset-id.jpg?width=400&format=webp&quality=80 400w,
    https://assets.example.com/asset-id.jpg?width=800&format=webp&quality=80 800w,
    https://assets.example.com/asset-id.jpg?width=1200&format=webp&quality=80 1200w"
    sizes="(max-width: 800px) 100vw, 800px"
    alt="Description of image">
    
  4. Almacene la referencia de la URL de envío en el contenido importado para que el bloque EDS pueda utilizarla para generar el marcado interactivo en el momento del procesamiento.

  5. Pruebe las páginas procesadas para verificar que las imágenes se entregan de forma interactiva y que se aplican las transformaciones de Dynamic Media.

Lectura relacionada

recommendation-more-help
experience-cloud-kcs-help-kbarticles