Use external image decoration from assets plugin

Author: Satya Deep Maheshwari

scripts/aem-assets-plugin-support.js

@@ -6,12 +6,14 @@ const blocks = ['video'];
 
 // Initialize the aem-assets-plugin.
 export default async function assetsInit() {
-  const { loadBlock, createOptimizedPicture } = await import(`${codeBasePath}/scripts/aem-assets.js`);
+  const { loadBlock, createOptimizedPicture, decorateExternalImages, decorateImagesFromAlt } = await import(`${codeBasePath}/scripts/aem-assets.js`);
   window.hlx = window.hlx || {};
   window.hlx.aemassets = {
     codeBasePath,
     blocks,
     loadBlock,
     createOptimizedPicture,
+    decorateExternalImages,
+    decorateImagesFromAlt,
   };
 }

scripts/scripts.js

@@ -243,13 +243,14 @@ function decorateDeliveryImages(main) {
 // eslint-disable-next-line import/prefer-default-export
 export function decorateMain(main) {
   // decorate external images with explicit external image marker
-  decorateExternalImages(main, '//External Image//');
+  window.hlx?.aemassets?.decorateExternalImages(main, '//External Image//');
 
   // decorate external images with implicit external image marker
-  decorateExternalImages(main);
+  window.hlx?.aemassets?.decorateExternalImages(main);
 
   // decorate images with delivery url and correct alt text
-  decorateDeliveryImages(main);
+  window.hlx?.aemassets?.decorateImagesFromAlt(main);
+
   // hopefully forward compatible button decoration
   decorateButtons(main);
   decorateIcons(main);