blog image

Hotfix for font and image issues in AEM 6.4

Blog - Technology

  • icons27 November, 2018
  • iconsMihir Mange

When we were migrating our component in AEM 6.4, we found issues with loading images and font in our project. I created a client lib and included it within the apps->projectname->components->component->clientlibs. As per Adobe recommendation I added an allowproxy=true property so that it’s not exposed directly from the apps folder. When I loaded the clientlibs it loaded from etc.clientlibs and it worked fine. I added some images within the clientlibs folder and referred those image in my CSS file. I provided the relative path of the images. However, when the page loaded it failed to load the images. The image URL started with /etc.clienlibs/imagepath. When I changed it to the absolute URL i.e. apps/imagepath in dev tools it seemed to work fine.

I researched this problem and found some changes in the new concept to load font and images in clientlibs. In the previous version of AEM client library was located in /etc/clientlibs in the repository while in the new version of AEM client libraries are located under /apps and are accessible using a proxy servlet. Basically, Proxy servlet server allows to read content via /etc.clientlibs/ if all the allowProxy property is set to true.

You can access static resources via proxy, make sure to use a relative path in place of absolute paths. One more important point to note here is to put all the fonts and images under “resources” directory, else fonts and images will not load. So ideally the folder structure should be like:

As an example:
● You have a client lib in /apps/initialyzer/clientlibs/clientlib-base
● You have a static image in /apps/initialyzer/clientlibs/clientlib-base/resources/img/logo.png
Then you set the allowProxy property on clientlib-base to true.
● You can then request /etc.clientlibs/initialyzer/clientlibs/clientlib-base.js
● You can then reference the image via /etc.clientlibs/initialyzer/clientlibs/clientlib-base/resources/img/logo.png

Keep in mind that it is mandatory to declare folder name as a resource because you set allowproxy property and public sites never include anything from /apps and /libs.

References:
https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/clientlibs.html