如何在监控大盘里配置图片

夜莺监控大盘可以通过文字卡片展示图片。本文以 Redis logo 为例,介绍如何把图片上传到图床,并用 Markdown/HTML 在仪表盘文字卡片中展示。

作者 秦晓辉@快猫星云

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

Redis Dashboard

核心要点

  • 夜莺仪表盘可以用“文字卡片”展示图片。
  • 图片需要先上传到可访问的图床或静态资源地址。
  • 文字卡片内容支持 Markdown 和 HTML,因此可以直接写 <img> 标签。
  • 建议给图片设置宽度,避免图片过大影响大盘布局。

操作步骤

1. 上传图片

先找一个图床或静态资源服务,把要展示的图片上传上去,并拿到一个浏览器可以访问的 URL。

2. 新建文字卡片

在监控大盘里新建一个图表,图表类型选择“文字卡片”。这个卡片可以用来放说明文字,也可以用来放 HTML 片段。

3. 配置图片内容

在图表样式配置里填写内容。文字卡片支持 Markdown 和 HTML,例如:

<img src="https://flashcat.cloud/images/logo/redis-logo.png" width="100px" />

编辑图表的截图如下:

Redis Chart Editor

配置建议

建议 原因
使用稳定的图片 URL 图床失效会导致仪表盘图片无法展示
设置 width 避免图片撑开卡片,影响大盘排版
优先使用透明背景 logo 在深色或浅色主题中更容易适配
控制图片数量 大盘主要用于看指标,图片只做识别和辅助说明

FAQ

Q1: 夜莺大盘里放图片必须用 HTML 吗? A: 不一定。文字卡片支持 Markdown 和 HTML。使用 HTML 的好处是可以直接设置图片宽度。

Q2: 图片显示不出来一般是什么原因? A: 常见原因是图片 URL 不可访问、图床禁止外链、地址写错,或网络环境无法访问该图片地址。

Q3: 可以把其他组件 logo 放到大盘里吗? A: 可以。只要图片地址可访问,都可以通过同样方式放入文字卡片。

联系我们交流

延伸路径

继续看解决方案和产品对比

如果你正在做监控、可观测性或故障定位相关选型,建议从解决方案和产品对比继续往下看。

标签 Nightingale
快猫星云 联系方式 快猫星云 联系方式
快猫星云 联系方式
快猫星云 联系方式
快猫星云 联系方式
快猫星云