sapui5 - 在 SAP UI5 App 中加载图像是否有稳定的解决方案?
问题描述
图像文件夹包含许多图像,如 xxx.png、yyy.png 等。
Image src="./images/xxx.png" 在我测试和部署到 SCP 后效果很好。但是,当我将应用程序注册到 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没用。
解决方案
老帖子,但让我试着帮助你。
为了从本地项目文件夹结构中检索文件,您需要计算它们的正确路径。这与 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 中。我没有测试这个,但原理应该是一样的。
祝你好运!
附言; 第一篇文章。非常欢迎任何关于改进的反馈:)
推荐阅读
- flutter - TabBar Flutter 的抖动/抖动动画
- python - 如何在 matplotlib 中绘制我的熊猫数据框
- github - 如何更新 Zenodo 中的版本?
- wordpress - woocommerce 自定义订单请求
- javascript - 在 Reactjs 应用程序中清除购物车项目的问题
- python-3.x - 如何从 docker 中的 YAML 文件中读取环境变量?
- php - 如何正确比较两个 Unix 时间戳
- css - 如何根据打字稿或Javascript中的URL参数值动态应用多个CSS文件
- wordpress - Wordpress Rest Api,帖子类型已创建但未显示在帖子中
- node.js - Ionic Cordova Angular 在 gif 上添加文本