SAPUI5项目中如何引用项目内文件夹存储的自定义icon图标

SAPUI5完全支持使用自定义图标，你当前写法未生效的核心原因通常是资源路径解析错误，可按以下方案调整：

方案1：直接修正图片路径 #

不要直接写相对路径images/capsule.png，SAPUI5应用运行时路由变化会改变相对路径的根目录，建议用sap.ui.require.toUrl拼接项目内的资源路径：

• 你项目的命名空间对应manifest.json中sap.app/id字段的取值，例如id为com.yourcompany.yourapp，则资源路径写法为：

  // 控制器代码
  const sCapsuleIconPath = sap.ui.require.toUrl("com/yourcompany/yourapp/images/capsule.png");
  // 绑定到视图模型供XML调用
  this.getView().getModel("viewModel").setProperty("/capsuleIcon", sCapsuleIconPath);
  

• XML视图调整为：

  <core:Icon src="{viewModel>/capsuleIcon}" visible="{= ${Chora} === true}"></core:Icon>
  

方案2：注册自定义图标池（更规范，适合多图标场景） #

如果有多个自定义图标，建议统一注册到sap.ui.core.IconPool，后续调用逻辑和SAP原生图标完全一致，无需重复处理路径：

1. 在项目初始化阶段（例如Component的init方法）注册图标：

   import IconPool from "sap/ui/core/IconPool";
   
   IconPool.addIcon("capsule", "customIcon", {
       src: sap.ui.require.toUrl("com/yourcompany/yourapp/images/capsule.png"),
       width: "24px",
       height: "24px"
   });
   

2. XML视图直接调用：

   <core:Icon src="sap-icon://customIcon/capsule" visible="{= ${Chora} === true}"></core:Icon>
   

排查校验点 #

• 确认svg/png文件本身没有损坏，本地直接打开可正常显示
• 检查项目构建后的dist目录，确认images文件夹和内部图标文件被正常打包，没有被构建规则过滤
• 如果在Fiori Launchpad环境运行，确认资源路径没有被FLP代理规则拦截

内容的提问来源于stack exchange，提问作者kyara