CODEWITHSUNDEEP
sapui5sap-fiori
sudarshan
sudarshan

Reputation: 21

Is there a stable solution for loading images in SAP UI5 App?

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.

Upvotes: 2

Views: 3649

Answers (1)

weitlos
weitlos

Reputation: 51

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

<!-- Given:
  data-sap-ui-resource-roots='{ "your.namespace": "./" }'
  '/imageUri' model value: "your/namespace/images/xyz.png"
-->
<Image src="{
  path: '/imageUri',
  formatter: 'sap.ui.require.toUrl'
}" />

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

Upvotes: 5

Related Questions