Skip to Content

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

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.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Best Answer
    Dec 02, 2016 at 07:22 AM

    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')

    Add comment
    10|10000 characters needed characters exceeded

    • 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...