Expand my Community achievements bar.

SOLVED

Proxy Image Component don't render asset (image) after convert into webp but the converted asset works

Avatar

Level 5

Hello, I create a proxy Image component, is the same Image component but the only thing that I modify is the getSrc method (method that get the fileReference of the image and the render the asset in the image component), I add the Web optimized-image delivery method

Original Core Image Component Code: https://github.com/adobe/aem-core-wcm-components/tree/main/content/src/content/jcr_root/apps/core/wc...


Documentation: https://experienceleague.adobe.com/docs/experience-manager-learn/cloud-service/developing/advanced/w...

I use this method on custom and proxy components and works in everything except with Image Component.

The weird thing is that the converted asset as webp appears on the browser console but as a NoScript tag

Aaron_Dempwolff_0-1701794815758.png

This is the part of the code that render the asset

Aaron_Dempwolff_3-1701795088164.png

And these are the method that I use to convert into webp

@Override
    public String getSrc() {
        String fileReference = coreImage.getSrc();
        Map<String, Object> options = new HashMap<>();
        options.put("format", "webp");
        options.put("preferwebp", "true");

        try {
            return getWebOptimizedUrl(resourceResolver, fileReference, options);    
        } catch (NullPointerException e) {
            // In case that the web-optimazed image fails, return the asset with the original format
            LOG.error("Error on webp api", e);
            return fileReference;
        }
    }
private String getWebOptimizedUrl(ResourceResolver resourceResolver, String path, Map<String, Object> options) {
       
        Resource resource = resourceResolver.getResource(path);
        Asset asset = DamUtil.resolveToAsset(resource);
   
        options.put("path", asset.getPath());
        options.put("format", options.get("format"));
        options.put("seoname", asset.getName());
       
        return assetDelivery.getDeliveryURL(resource, options);
      }

 

And if I paste the same image src in the browser the asset converted appears

Aaron_Dempwolff_2-1701795018983.png


Why this error only appears with this component even if I use the same method and code on others custom and proxy components and it works?


This error is in all the environments

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor
1 Reply

Avatar

Correct answer by
Community Advisor