在夜莺监控大盘里,有时不仅需要展示指标曲线,也需要放入组件 logo、系统拓扑图片或说明性图片,方便用户快速识别当前大盘服务对象。比如下面这个 Redis Dashboard,左上角的 Redis logo 就是通过图片方式放进大盘的。

核心要点
- 夜莺仪表盘可以用“文字卡片”展示图片。
- 图片需要先上传到可访问的图床或静态资源地址。
- 文字卡片内容支持 Markdown 和 HTML,因此可以直接写
<img>标签。 - 建议给图片设置宽度,避免图片过大影响大盘布局。
操作步骤
1. 上传图片
先找一个图床或静态资源服务,把要展示的图片上传上去,并拿到一个浏览器可以访问的 URL。
2. 新建文字卡片
在监控大盘里新建一个图表,图表类型选择“文字卡片”。这个卡片可以用来放说明文字,也可以用来放 HTML 片段。
3. 配置图片内容
在图表样式配置里填写内容。文字卡片支持 Markdown 和 HTML,例如:
<img src="https://flashcat.cloud/images/logo/redis-logo.png" width="100px" />
编辑图表的截图如下:

配置建议
| 建议 | 原因 |
|---|---|
| 使用稳定的图片 URL | 图床失效会导致仪表盘图片无法展示 |
设置 width |
避免图片撑开卡片,影响大盘排版 |
| 优先使用透明背景 logo | 在深色或浅色主题中更容易适配 |
| 控制图片数量 | 大盘主要用于看指标,图片只做识别和辅助说明 |
FAQ
Q1: 夜莺大盘里放图片必须用 HTML 吗? A: 不一定。文字卡片支持 Markdown 和 HTML。使用 HTML 的好处是可以直接设置图片宽度。
Q2: 图片显示不出来一般是什么原因? A: 常见原因是图片 URL 不可访问、图床禁止外链、地址写错,或网络环境无法访问该图片地址。
Q3: 可以把其他组件 logo 放到大盘里吗? A: 可以。只要图片地址可访问,都可以通过同样方式放入文字卡片。
