SAP UI5 App加载图片有稳定的解决方案吗？

Question

Images 文件夹包含许多图像，如 xxx.png、yyy.png 等。

当我测试时以及部署到 SCP 后，图像 src="./images/xxx.png" 效果非常好。但是，当我将应用程序注册到 Launchpad 并从那里打开它时，同样的方法不起作用。为什么图像无法加载？

我在网络中看到以下内容：

Component.js 正在从以下位置加载

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

但图像正在尝试从中获取负载

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

https://xxxxxx-yyyyy.dispatcher.eu3.hana.ondemand.com/images/yyy.png这会导致 404。相反，我应该点击以下网址。

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

我尝试将图像 src 更改为 src="./images/xxx.png" 和 src="/images/yyy.png"。但是，相同的旧 URL 会被点击并导致 404。

为什么会出现这样的情况呢？为什么 component.js 和图像从不同的根加载？我发现很多答案建议使用 jQuery.sap.getModulePath("com.xxx.Component") 但这对我没有任何帮助。它返回给我https://sapui5.hana.ondemand.com/resources/com/xxx/Component这是没有用的。

Answer 1

老帖子，但让我尽力帮助你。

为了从本地项目文件夹结构中检索文件，您需要计算它们的正确路径。这与 FLP 环境相关，因为应用程序在加载时会分配动态路径。

sap.ui.require.toUrl这是一个神奇的功能，应该可以为您解决问题。

该函数需要一个路径作为输入参数，并将其转换为 FLP 内的工作路径。参见方法说明。

例子

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

sap.ui.require.toUrl正在替换自 UI5 1.58 以来已弃用的jQuery.sap.getModulePath内容。

从版本 1.61 开始，可以通过value属性绑定将静态值传递给格式化程序函数，如问题将静态值传递给 XML 视图中的格式化程序参数中所述。

如果格式化程序不适合您，您可以尝试在控制器中调用该函数并将计算出的路径存储在本地 JSONModel 中。我没有测试过，但原理应该是一样的。

祝你好运！

附注；第一篇文章。非常欢迎任何有关改进方面的反馈:)