Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.

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


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


This is the part of the code that render the asset


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

    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


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

1 Accepted Solution


Correct answer by
Community Advisor
1 Reply


Correct answer by
Community Advisor