DocumentationExperience Cloud KCS

Les images importées s’affichent sous une forme statique au lieu de ressources réactives dans AEM Edge Delivery Services

Dernière mise à jour : 3 septembre 2026

Dans Adobe Experience Manager (AEM) Edge Delivery Services, les images importées dans les pages peuvent s’afficher en tant qu’images statiques au lieu de ressources Dynamic Media réactives. Par conséquent, les images ne bénéficient pas des fonctionnalités de Dynamic Media, telles que la génération automatique de plusieurs tailles ou transformations d’image. Pour résoudre ce problème, générez un balisage d’image réactif à l’aide des URL de diffusion AEM Assets prises en charge.

Description description

Environnement

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

Problème/Symptômes

  • Les images importées dans les pages s’affichent en tant qu’images statiques au lieu de ressources Dynamic Media réactives.
  • Les images ne bénéficient pas des fonctionnalités de Dynamic Media, telles que la génération automatique de plusieurs tailles ou transformations d’image.
  • Le problème se produit généralement lors des migrations automatisées où les références aux images sont renseignées par programmation.
  • Aucun message d’erreur ne s’affiche, mais les images ne présentent pas de comportement réactif.

Résolution resolution

Suivez les étapes ci-dessous pour résoudre le problème.

  1. Assurez-vous que les images sont chargées ou résolues comme AEM Assets approuvé dans votre instance AEM Cloud Service.

  2. Pour chaque image, obtenez l’URL de diffusion AEM Assets prise en charge. Pour ce faire, utilisez l’OpenAPI d’Assets ou résolvez la ressource par le biais de son jcr:uuid et en récupérant l’URL de diffusion.

  3. Mettez à jour la logique de bloc de l’importateur ou EDS pour générer un balisage d’image réactif à l’aide de l’URL de diffusion AEM Assets. Incluez des paramètres de largeur, de recadrage, de format et de qualité pour activer les transformations Dynamic Media.

    Exemple de balisage d’image réactif :

    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. Stockez la référence d’URL de diffusion dans le contenu importé afin que le bloc EDS puisse l’utiliser pour générer le balisage réactif au moment du rendu.

  5. Testez les pages rendues pour vérifier que les images sont diffusées de manière réactive et que les transformations Dynamic Media sont appliquées.

Lecture connexe

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