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

[Aaron_Dempwolff]

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

This is the part of the code that render the asset

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

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

[arunpatidar · Accepted solution]

Hi @Aaron_Dempwolff 
I think webP is supported OOTB with core component

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/is-webp-image-supported-in... 

https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/web-opti...