Unable to read images when using clientlib with allowproxy | Community
Skip to main content
N
nalla0109
Level 4
May 24, 2018
Solved

Unable to read images when using clientlib with allowproxy

  • May 24, 2018
  • 4 replies
  • 6537 views

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 ?

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by arunpatidar

    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

    4 replies

    arunpatidar
    Community Advisor
    arunpatidarCommunity AdvisorAccepted solution
    Community Advisor
    May 24, 2018

    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
      P
      prajwalJain
      September 25, 2020
      Its working, Thanks. But why the folder name should be named as resources ? Any idea?
        N
        nalla0109Author
        Level 4
        May 24, 2018

        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

          vikramca06
          vikramca06
          Level 4
          November 17, 2021

          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.

            arunpatidar
            Community Advisor
            arunpatidarCommunity Advisor
            Community Advisor
            May 24, 2018

            Hi,

            Yes , if you set the allowProxy property

            Using Client-Side Libraries

            Arun Patidar
              harryl53317155
              harryl53317155
              Level 2
              September 15, 2020
              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.
                N
                nalla0109Author
                Level 4
                May 24, 2018

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

                Thanks for the information.

                  Terms & ConditionsAccessibility statement

                  Loading footer...