Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Unable to read images when using clientlib with allowproxy

Avatar

Level 4

I have created a clientlib and I have included it within the apps->projectname->components->component->clientlibs. As per adobe recommendation I have added allowproxy=true property so that its not exposed directly from the apps folder. When I load the clientlibs its loading from etc.clientlibs and it works fine. But now I have added some images within the clientlibs folder and I have referred those image url's in my css file. I have provided the relative path of the images. However when the page loads its not loading the images. The image url is starting with /etc.clienlibs/imagepath. When I change it to the the absolute url i.e. apps/imagepath in dev tools it works fine. But we should not be exposing directly the apps url rite. If thats the case how to load images via etc.clientlibs ?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

A static resource can only be accessed via the proxy, if it resides in a resources folder like a resource below the client library folder.

As an example:

  • You have a clientlib in /apps/myproject/clientlibs/foo
  • You have a static image in /apps/myprojects/clientlibs/foo/resources/icon.png

Then you set the allowProxy property on foo to true.

  • You can then request /etc.clientlibs/myprojects/clientlibs/foo.js
  • You can then reference the image via /etc.clientlibs/myprojects/clientlibs/foo/resources/icon.png


Arun Patidar

View solution in original post

7 Replies

Avatar

Correct answer by
Community Advisor

A static resource can only be accessed via the proxy, if it resides in a resources folder like a resource below the client library folder.

As an example:

  • You have a clientlib in /apps/myproject/clientlibs/foo
  • You have a static image in /apps/myprojects/clientlibs/foo/resources/icon.png

Then you set the allowProxy property on foo to true.

  • You can then request /etc.clientlibs/myprojects/clientlibs/foo.js
  • You can then reference the image via /etc.clientlibs/myprojects/clientlibs/foo/resources/icon.png


Arun Patidar

Avatar

Level 1
Its working, Thanks. But why the folder name should be named as resources ? Any idea?

Avatar

Level 4

Is it mandatory to declare the folder name as resources. Under the clientlib folder I have created a folder with name as 'img' and it didn't work. But when I changed the name of the folder to resources it started working

Avatar

Level 4

Yes. images will load only if you change the folder path in third-party css files. in my case, I have to updated the path in datatable css file to load the icons.

Avatar

Community Advisor

Hi,

Yes , if you set the allowProxy property

Using Client-Side Libraries



Arun Patidar

Avatar

Level 2
How this "resources" sub folder works with any 3rd party library which contains images? do we have to modify 3rd party library code to change image path references? we need a better way to handle this.

Avatar

Level 4

I have read the clientlibs article before but never thought the folder name itself should be 'resources'.

Thanks for the information.