图标缺失需依次排查:一、检查icons目录结构及文件命名权限;二、核对manifest中icon字段路径或base64格式;三、验证网络请求状态码与cors;四、审查构建工具资源处理规则;五、确认注册时icon未被运行时覆盖。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

如果您在 WorkBuddy 中使用 OpenClaw 技能时发现部分技能缺少图标显示,则可能是由于资源路径配置错误、图标文件缺失或前端加载逻辑未正确识别技能元数据。以下是排查与修复该问题的多种方法:
一、检查 OpenClaw 技能包中 icons 目录结构
WorkBuddy 依赖 OpenClaw 技能包内预置的 icons/ 子目录提供 SVG 或 PNG 图标资源,若该目录不存在、命名不一致或图标文件未按约定命名,将导致图标无法渲染。
1、进入 OpenClaw 技能所在根目录,确认是否存在名为 icons 的子文件夹。
2、检查该文件夹下是否包含与技能 ID 完全匹配的图标文件,例如技能 ID 为 send_email_v2,则应存在 send_email_v2.svg 或 send_email_v2.png。
3、验证图标文件权限是否允许 WorkBuddy 进程读取,特别是部署在 Linux 容器中时需确保 UID/GID 具备读取权限。
二、核对 WorkBuddy 的技能元数据定义字段
WorkBuddy 在加载技能时会读取技能 manifest.json(或 skill.yaml)中的 icon 字段值,若该字段为空、路径错误或指向不存在的资源 URL,前端将跳过图标渲染流程。
1、打开对应技能的元数据文件,定位到 icon 键值对。
2、确认其值为相对路径(如 ./icons/submit_form.svg)或绝对路径(如 /static/icons/submit_form.svg),且与实际文件位置一致。
3、若使用 base64 内联图标,需确保字符串以 data:image/svg+xml;base64, 开头且无截断或编码错误。
三、验证前端资源加载网络请求状态
WorkBuddy 前端通过 HTTP 请求动态加载图标资源,若请求返回 404、403 或 CORS 错误,图标将静默失败而不报错提示。
1、在浏览器开发者工具中切换至 Network 面板,筛选 img 或 svg 类型请求。
2、执行触发该技能的操作,观察对应图标路径的请求响应状态码及响应头中的 Content-Type 是否为 image/svg+xml 或 image/png。
3、若响应为 404,检查 WorkBuddy 静态资源服务是否已将 icons/ 目录映射为可访问路径;若为 CORS 错误,需在后端响应头中添加 Access-Control-Allow-Origin: *。
四、检查 Webpack/Vite 构建时的静态资源处理规则
若 WorkBuddy 前端采用现代构建工具打包,图标可能因未被正确纳入 asset 处理流程而被忽略或重命名,导致运行时路径失效。
1、查看构建配置文件(如 vite.config.ts 或 webpack.config.js),确认 assetsInclude 或 rules 中是否包含对 .svg 和 .png 文件的支持。
2、检查图标引用方式:若使用 import icon from './icons/xxx.svg',需确保插件(如 @svgr/webpack)已启用;若使用字符串路径,则需确认该路径位于 public/ 目录下并被直接拷贝。
3、清理构建缓存并重新打包,验证 dist 目录中是否生成对应图标文件且路径未被哈希混淆。
五、确认技能注册时的 icon 字段是否被运行时覆盖
部分 WorkBuddy 插件机制支持在技能注册阶段通过钩子函数动态修改元数据,若某中间件或初始化脚本将 icon 字段设为 null 或空字符串,将导致图标丢失。
1、搜索项目代码中所有调用 registerSkill() 或类似注册 API 的位置。
2、检查传入参数对象中 icon 属性是否被条件逻辑覆盖,例如 icon: shouldShowIcon ? meta.icon : null。
3、在注册前插入调试语句,打印完整技能元数据对象,确认 icon 字段值在进入注册流程时是否符合预期。











