Library image (public) not available in consumer application

I have a library module which contains some custom patterns and images. One of these patterns uses a CSS sprite, and the sprite image is also stored in the same library module (interface -> images).

I have a mobile consumer application referencing this pattern, but the sprite image in the pattern library module is throwing a 404. It appears that the image (set to public) is not directly accessible by it's full url.

Any work around for this?  

Solution

Is it a tiny image? You could encode it in base64 and add it to the CSS... Not the best idea ever but it's hard to see why it's 404'ing unless you provide a lot more info.

Solution

No it's quite a large PNG :

File size: 150kb

Dimensions: 32px x 8231px

I will try your suggestion. Thank you!

What's the URL you get on the console where it 404's ?

If you copy paste this URL directly to your address bar, does it actually resolve?

Hello Robert,

Did you get the path from the property Runtime path?

You can test it on browser with the URL = https://<servername>/<runtime path>


I hope it helps.

BR,

Luis

Hi Luis.

Yes I did, in fact you can even drag and drop the image into the CSS to effectively guarantee that the path is correct. But even by directly accessing the image URL in the browser, I am getting a 404 not found. I am guessing this is because it's a library module? In traditional web apps this is not a problem.

Rob

Hi,

I didn't notice that you refer to a Reactive App.

I tested with the Library module and the result is the same as you have. I can't access it in the browser (404 error). I found this restriction in the documentation about the Library modules: "you cannot reference the following elements from a Library in a Traditional Web App: Blocks, Client Actions, Images, Themes, Scripts and Resources."

So I think is a restriction of Library modules.

Please see more here:

https://success.outsystems.com/Documentation/11/Developing_an_Application/Reuse_and_Refactor/Libraries


Robert Madden wrote:

Hi Luis.

Yes I did, in fact you can even drag and drop the image into the CSS to effectively guarantee that the path is correct. But even by directly accessing the image URL in the browser, I am getting a 404 not found. I am guessing this is because it's a library module? In traditional web apps this is not a problem.

Rob



Thanks Luis, 

I guess this restriction applies not just to traditional web apps, but to any CSS sprites used in mobile or reactive consumer applications. I have several mobile apps consuming this pattern and @Mariano's solution above is working very well for me for now. I guess this issue could be fed back to the OS team.

Rob

You can also try to move the images to another module (not Library) and use it from there. 

Yes, for sure but not very clean. If however there is a problem with using the base64 encoded images then I will need to do this.