What path to use for application picture file in image control in fiori application? WEBIDE

[ioan_radulescu2]

Hi experts,

I've been given recently the opportunity to code my first fiori app (those SAP courses have been expensive ... :-s). And it is a Fiori application and works fine in the launchpad, once integrated. But I can't for the love of God reference the uploaded picture files. My application is called XXX2 and I stored the images in XXX2/webapp/image/XXX_LOGO.png. I programmed the application in the SAP WEBIDE (which is NOT a mature IDE yet - not offering all possibilities for settings in controls, bugs, unstable). But many things are easy with the SAP WEBIDE. I tried the following paths in the src field to the image control used by View1 in XXX2/webapp/views/View1 to no avail:

1. /webapp/image/XXX_LOGO.png

2./XXX2/webapp/image/XXX_LOGO.png

3. /XXX2/image/XXX_LOGO.png

4. ./XXX2/image/XXX_LOGO.png

5. ../XXX2/image/XXX_LOGO.png

6. ../../resources/XXX2/image/XXX_LOGO.png

Number 6 (whoaaa I'm not a number!!!) was generated according to a post I saw on the Internet - getting the path of the component at runtime of a Fiori application and concatenating the path to the image file to that. But still nothing.

This is WEBIDE so it should have a form that shows the picture also at design-time so I'm thinking there must be a path I can statically enter in the src field and it will show the picture at run-time AND at design-time. Unfortunately the WEBIDE documentation doesn't say anything about it.

[kammaje_cis · Accepted solution]

All your paths have to be relative to Component.js.

Assuming you have Component.js as a direct child of webapp, i would say this URL would work.

image/XXX_LOGO.png (Note there is no '/' in the beginning')

[ioan_radulescu2 · Accepted solution]

Thanks Krishna, I spent so much with this that I would even wire you some money :). It worked just fine, but it still doesn't show the pictures at design-time only at run-time.

[ioan_radulescu2 · Accepted solution]

Hi Krishna,

I just tried to use the application in the fiori launchpad and it suddenly didn't work anymore. Checking the console it shows that the file image/XXX_LOGO.png is not found (404). Do you know how I can tell the webapp to bundle the pictures with the rest of the files? Looking at the structure of folders and files downloaded locally I don't see the image folder, so I think I have to tell the WEBIDE that it should load those pictures too...

[Noel_Munday]

Hi,

Thanks for the solution. Had the same problem and it worked out.

In my case the image is at the same level as /WEBAPP/ so considering that Component.js is at /WEBAPP/Component.js my relative path in the src statement is <Image src="/XXX_LOGO.png" width="140px" height="140px" id="image1"/>

Nice to see it work.

Regards,

Noel.