Le immagini importate vengono riprodotte come risorse statiche anziché reattive in AEM Edge Delivery Services

In Adobe Experience Manager (AEM) Edge Delivery Services, le immagini importate nelle pagine possono essere riprodotte come immagini statiche invece che come risorse Dynamic Media dinamiche. Di conseguenza, le immagini non traggono vantaggio dalle funzioni di Dynamic Media, come la generazione automatica di più dimensioni o trasformazioni. Per risolvere questo problema, genera un markup di immagine reattivo utilizzando gli URL di consegna di AEM Assets supportati.

Descrizione description

Ambiente

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

Problema/Sintomi

  • Le immagini importate nelle pagine vengono riprodotte come immagini statiche invece delle risorse Dynamic Media reattive.
  • Le immagini non traggono vantaggio dalle funzioni di Dynamic Media, come la generazione automatica di dimensioni o trasformazioni multiple.
  • Il problema si verifica in genere durante le migrazioni automatizzate in cui i riferimenti alle immagini vengono compilati a livello di programmazione.
  • Non vengono visualizzati messaggi di errore, ma le immagini non mostrano un comportamento reattivo.

Risoluzione resolution

Per risolvere il problema, segui la procedura riportata di seguito.

  1. Assicurati di caricare o risolvere le immagini come AEM Assets approvato nella tua istanza di AEM Cloud Service.

  2. Per ogni immagine, ottieni l’URL di consegna AEM Assets supportato. A tale scopo, utilizza Assets OpenAPI oppure risolvendo la risorsa tramite il relativo jcr:uuid e recuperando l’URL di consegna.

  3. Aggiorna la logica di importazione o blocco EDS per generare un markup di immagine reattivo utilizzando l’URL di consegna AEM Assets. Includi parametri per larghezza, ritaglio, formato e qualità per abilitare le trasformazioni Dynamic Media.

    Esempio di markup di immagine reattiva:

    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. Memorizza il riferimento URL di consegna nel contenuto importato in modo che il blocco EDS possa utilizzarlo per generare il markup reattivo al momento del rendering.

  5. Verifica le pagine sottoposte a rendering per verificare che le immagini vengano distribuite in modo dinamico e che vengano applicate le trasformazioni Dynamic Media.

Lettura correlata

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