Web-Optimized Image Delivery works on one custom component but in other custom components doesn't work

[Aaron_Dempwolff]

Hello, what happens is that I am implementing the Web-Optimized Image Delivery API in my custom components to convert the uploaded assets into webp format.

Use the Adobe Official documentation:

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

And from the adobe forum with the question:

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-can-i-habilitate-web-o...

I implement this into one custom component and it works, but the problem is, I repeat the same solution into another custom components but doesn't works, the curious part is if I just add this part in the code of the sling component:

@Self

@Required

private SlingHttpServletRequest request;

It breaks all the class inclusive if I only declare the variable and never use it, and it makes fail to all the properties when it should only affect to the fileReference property that is the asset that the user knows.

What could be the cause of this and how could I fix it?

This is the code of my sling model of one of my custom components that I want to add the API to.

package com.tfs.core.models;

import java.util.HashMap;

import java.util.Map;

import org.apache.sling.api.SlingHttpServletRequest;

import org.apache.sling.api.resource.Resource;

import org.apache.sling.api.resource.ResourceResolver;

import org.apache.sling.models.annotations.DefaultInjectionStrategy;

import org.apache.sling.models.annotations.Model;

import org.apache.sling.models.annotations.Required;

import org.apache.sling.models.annotations.injectorspecific.InjectionStrategy;

import org.apache.sling.models.annotations.injectorspecific.OSGiService;

import org.apache.sling.models.annotations.injectorspecific.Self;

import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;

import org.slf4j.Logger;

import org.slf4j.LoggerFactory;

import com.adobe.cq.wcm.spi.AssetDelivery;

import com.day.cq.dam.api.Asset;

import com.day.cq.dam.commons.util.DamUtil;

import com.tfs.core.utils.TFSUtils;

@Model(adaptables = { Resource.class,

        SlingHttpServletRequest.class }, adapters = SliderCommonFieldsMFModel.class, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)

public class SliderCommonFieldsMFModel {

    private static final Logger LOG = LoggerFactory.getLogger(MosaicModel.class);

    @OSGiService(injectionStrategy = InjectionStrategy.OPTIONAL)

    private AssetDelivery assetDelivery;

    @Self

    @Required

    private SlingHttpServletRequest request;

    @ValueMapValue

    private String pretitle;

    @ValueMapValue

    private String title;

    @ValueMapValue

    private String description;

    @ValueMapValue

    private String fileReference;

    @ValueMapValue

    private String buttontext;

    @ValueMapValue

    private String buttonlink;

    @ValueMapValue

    private String imagelink;

    @ValueMapValue

    private String imageAltText;

    @ValueMapValue

    private String linkTarget;

    @ValueMapValue

    private String buttoncheckbox;

    @ValueMapValue

    private String buttonColor;

    @ValueMapValue

    private String showCTA;

    public String getPretitle() {

        return pretitle;

    }

    public String getTitle() {

        return title;

    }

    public String getDescription() {

        return description;

    }

    public String getFileReference() {

        Map<String, Object> options = new HashMap<>();

        options.put("format", "webp");

        options.put("preferwebp", "true");

        options.put("width", "350");

        options.put("height", "350");

        try {

            return getWebOptimizedUrl(request.getResourceResolver(), fileReference, options);  

        } catch (Exception e) {

            LOG.error("Error on webp api", e);

            return fileReference;

        }

    }

    public String getButtontext() {

        return buttontext;

    }

    public String getButtonlink() {

        return TFSUtils.linkFormatter(buttonlink);

    }

    public String getImagelink() {

        return TFSUtils.linkFormatter(imagelink);

    }

    public String getImageAltText() {

        return imageAltText;

    }

    public String getLinkTarget() {

        return linkTarget;

    }

    public String getButtoncheckbox() {

        return buttoncheckbox;

    }

    public String getButtonColor() {

        return buttonColor;

    }

    public String getShowCTA() {

        return showCTA;

    }

    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);

  }

}

[Mahedi_Sabuj · Accepted solution]

Hi @Aaron_Dempwolff,

You can consider creating an OSGi service that acts as a “smart proxy” for the AEM-provided AssetDelivery OSGi Service. You can refer to the example code provided here: LINK

Additionally, you can enhance the current implementation of "request.getResourceResolver()" with the injected "ResourceResolver" SlingObject.

@SlingObject
private ResourceResolver resourceResolver;

return getWebOptimizedUrl(resourceResolver, fileReference, options);