如何在 Oracle APEX 登录页中正确设置自定义 Logo 背景图

在 Oracle APEX 中，直接在页面“Inline CSS”中使用 #APP_FILES# 或 #APP_IMAGES# 等 substitution string 会导致路径解析失败；必须将含动态路径的 CSS 移至外部文件，并通过 File URLs 引入，才能确保 logo 图片正常加载。

在 Oracle APEX 中，直接在页面“Inline CSS”中使用 `#APP_FILES#` 或 `#APP_IMAGES#` 等 substitution string 会导致路径解析失败；必须将含动态路径的 CSS 移至外部文件，并通过 `File URLs` 引入，才能确保 logo 图片正常加载。

Oracle APEX 的登录页（Login Page）默认使用 .t-Login-logo 类控制 logo 区域样式。当你尝试通过页面属性中的 Inline CSS 添加如下代码时：

.t-Login-logo {background-image: url(#APP_FILES#LogofinitoJ-removebg.jpg);background-size: cover;width: 302px;height: 100px;}

虽然 background-size、width 和 height 均能生效，但 background-image 却无法加载图片——根本原因在于：APEX 不会在“Inline CSS”上下文中解析 #APP_FILES#、#APP_IMAGES# 等 substitution strings。这些占位符仅在以下场景被自动替换：

1. HTML 模板（如 Page Template、Region Template）的“HTML”或“Header/Footer”区域；
2. 外部 CSS/JS 文件通过 #APP_IMAGES# 或 #APP_FILES# 引用；
3. 动态动作（Dynamic Action）中的 JavaScript 代码（需配合 apex.util.applySubstitutions）。

正确做法是将 CSS 移至外部文件，并通过 APEX 的静态文件机制引入：

1. 上传图片资源

   进入 Shared Components → Static Application Files，上传 LogofinitoJ-removebg.jpg（建议重命名为语义化名称，如 login-logo.png）。

2. 创建外部 CSS 文件（例如 login-logo.css）

   内容如下（注意：此处不使用#APP_FILES#，而是直接引用相对路径）：

   .t-Login-logo {background-image: url('LogofinitoJ-removebg.jpg'); /* 与 CSS 文件同级目录 */background-size: cover;background-repeat: no-repeat;background-position: center;width: 302px;height: 100px;}

3. 上传 CSS 文件

   同样在 Static Application Files 中上传 login-logo.css。

4. 在登录页中引用该 CSS

   进入登录页（通常是 Page 101）→ Page Attributes → CSS → File URLs，填入：

   #APP_IMAGES#login-logo.css

   ✅ 此处 #APP_IMAGES# 将被正确解析为实际 URL（如 /i/{app_id}/login-logo.css），且该 CSS 文件内引用的图片路径会相对于 CSS 文件位置解析，从而成功加载。

注意事项：

1. 若图片与 CSS 不在同一目录，请使用相对路径（如 images/logo.png）并确保目录结构一致；
2. 避免在 Inline CSS 中写任何含 #APP_*# 的路径，否则一律失效；
3. 可通过浏览器开发者工具（Network 标签）检查 CSS 和图片是否返回 404，快速定位路径问题；
4. 如需更高灵活性（如多环境适配），可结合 APEX 应用项（Application Items）+ JavaScript 动态注入样式，但对登录页而言，外部 CSS 是最简洁可靠的方案。

通过以上步骤，.t-Login-logo 将稳定显示你指定的自定义 logo，同时保持 APEX 应用的可维护性与部署一致性。