2

Images folder contain many images like xxx.png, yyy.png, etc.

Image src="./images/xxx.png" works very well when I am testing and after deploying to SCP. But, the same doesn't work when I register the app to Launchpad and open it from there. Why does the images don't load?

I see the following the in the network:

Component.js is getting loaded from

https://xxxxxx-yyyyy.dispatcher.eu3.hana.ondemand.com/sap/fiori/workbox/Component.js?ts=1.0.143 with 200 status

But the images are trying to get load from

https://xxxxxx-yyyyy.dispatcher.eu3.hana.ondemand.com/images/xxx.png

https://xxxxxx-yyyyy.dispatcher.eu3.hana.ondemand.com/images/yyy.png which results in 404. Instead the hit should I have been on the following url.

https://xxxxxx-yyyyy.dispatcher.eu3.hana.ondemand.com/images/sap/fiori/workbox/images/xxx.png

I tried changing the Image src to src="./images/xxx.png" and src="/images/yyy.png". But, same old URLs are hit and results in 404.

Why does this happen so? Why does component.js and images are loaded from different root? I found many answers suggesting to use jQuery.sap.getModulePath("com.xxx.Component") but that didn't help me the least. It returned me https://sapui5.hana.ondemand.com/resources/com/xxx/Component which is of no use.

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
sudarshan
  • 21
  • 1
  • 3

1 Answers1

5

Old post but let me try to help you.

In order to retrieve files from your local project folder structure, you need to calculate the correct path to them. This is relevant for the FLP environment as apps get dynamic paths assigned when loaded.

sap.ui.require.toUrl is the magic function that should do the trick for you.

This function expects a path as input parameter and will translate it into a working path inside the FLP. See the method description.

Example

<Image src="{
  value: 'your/name/space/images/xxx.png',
  formatter: 'sap.ui.require.toUrl'
}" />

sap.ui.require.toUrl is replacing the deprecated jQuery.sap.getModulePath since UI5 1.58.

And since version 1.61, it is possible to pass static values to formatter functions via value in property binding as mentioned in the question Pass Static Value to Formatter Parameters in XML View.

If the formatter is no way to go for you, you can try to call the function within the controller and store the calculated path in a local JSONModel. I did not test this but the principle should be the same.

Good Luck!

P.S.; First Post. Any feedback on what to improve is very welcome :)

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
weitlos
  • 51
  • 1
  • 3
  • I think a custom formatter is not needed in this case. `formatter: 'sap.ui.require.toUrl'` works too since the function is globally available. – Boghyon Hoffmann Feb 02 '21 at 20:39
  • 1
    Thank you for the edit and the lean solution. I tested it and it works perfectly! :) – weitlos Feb 03 '21 at 11:24
  • Wonderful solution. I was reading about the $modulePath solution but it just seemed so outdated, and then I found and tested your solution. Thank you! – Alexandre Leite Nov 22 '21 at 13:44