
本文详解如何在 Odoo 的 tree 视图为空时,通过 help 字段正确渲染静态图片(如占位图或引导图),重点解决路径无效导致图片不显示的问题,并提供可直接复用的代码示例与最佳实践。
本文详解如何在 odoo 的 `tree` 视图为空时,通过 `help` 字段正确渲染静态图片(如占位图或引导图),重点解决路径无效导致图片不显示的问题,并提供可直接复用的代码示例与最佳实践。
在 Odoo 中,当列表(如 tree 视图)暂无数据时,系统会自动展示 标签来增强视觉引导效果——但关键在于图片路径必须符合 Odoo 的静态资源加载规范。
默认情况下,直接使用 static/description/icon.png 会导致 404 错误,因为 Odoo 不识别相对路径;它要求静态资源路径以 /模块名/ 开头,并通过 Web 服务路由解析。例如,若你的图片存放在 base 模块的 static/description/ 目录下(如官方模块常用位置),则需写为:
<field name="help" type="html">
<p class="o_view_nocontent_smiling_face">
Create a Contact in your address book
</p>
<p>
Odoo helps you track all activities related to your contacts.
</p>
<div class="text-center mt-4">
<img src="/base/static/description/icon.png"
alt="No contacts yet"
class="img img-fluid o_we_custom_image"
style="max-height: 180px; opacity: 0.9;" />
</div>
</field>✅ 关键要点说明:
- ✅ 路径格式必须为 /模块名/static/子目录/文件名(如 /my_module/static/src/img/empty-state.png);
- ✅ 图片需真实存在于对应模块的 static/ 文件夹中,且模块已正确安装并更新;
- ✅ 推荐添加 class="img img-fluid"(Bootstrap 兼容类)和内联样式(如 max-height、opacity)提升响应式表现与视觉柔和度;
- ✅ 始终设置 alt 属性,兼顾可访问性(Accessibility)与 SEO 友好性。
⚠️ 注意事项:
- 若使用自定义模块(如 my_custom_module),请确保图片路径与模块名严格一致(区分大小写),并重启服务后执行 odoo-bin -u my_custom_module -d your_db 更新模块;
- 避免使用绝对本地路径(如 file:///...)或外部 URL(除非明确允许跨域且受信任),否则可能被浏览器拦截或引发安全警告;
- 在生产环境建议压缩图片体积,并考虑提供 srcset 或
适配不同屏幕密度(高级优化项)。
综上,只需修正 src 属性为 Odoo 认可的模块静态资源路径,并辅以合理样式控制,即可在空列表场景下优雅呈现引导图片,显著提升用户体验与界面专业度。










