在 ThingsBoard，我们始终致力于增强用户体验和系统性能。我们的最新更新，版本 3.6.2，对仪表板、小部件等中的图像管理方式进行了重大改进。此更新是一项关键增强功能，旨在解决随着我们的用户群扩大而出现的低效率问题。
大图像的挑战
自最早的版本以来，我们的平台已允许通过外部链接或 Base64 编码的数据 URL 在仪表板和小部件中嵌入图像。虽然灵活，但这种方法提出了重大挑战。用户偶尔会将最大 50MB 的图像直接嵌入到仪表板中。编辑或导出这些仪表板意味着需要在服务器之间传输大量 JSON 文件，这是一个非常低效的过程。这不仅影响加载时间，还影响仪表板编辑体验的响应能力。
解决方案
为了解决这个问题，我们对平台内图像的处理方式进行了重大更新。此更新的一个核心方面是引入了 图片库。通过将仪表板移动到单独的实体并利用我们的内部相关链接来存储图像参考，我们显着提高了效率。此更改最大限度地减少了仪表板 JSON 文件的大小，从而简化了加载和编辑过程。图片库简化了上传、组织和选择图像的过程。
向后兼容性
该平台的升级脚本会自动将所有现有仪表板转换为新格式。用户仍然可以将旧格式的仪表板上传到新的平台实例。这些仪表板将在上传过程中自动转换为新格式。
例如，考虑一个“传感器”仪表板，其背景图像以旧格式存储：
{
...
"backgroundImageUrl": "data:image/webp;base64,iVBORw...JRU5ErkJggg=="
...
}升级完成后，图片库中会生成一个新图片：
图像名称是根据仪表板名称和使用图像的仪表板元素自动生成的。同样的行为也适用于小部件配置中使用的图像：标记、背景等。仪表板现在使用以下链接引用图像：
{
...
"backgroundImageUrl": "/api/images/tenant/sensors_dashboard_default_background.webp"
...
}私人和公共图像链接
可以在系统和租户级别配置映像。所有平台用户都可以访问系统级小部件，而特定租户的授权用户可以使用租户映像。
要将图像嵌入到 Angular HTML 模板中，例如 Markdown 小部件、小部件编辑器中的 HTML 部分、自定义操作等，请使用以下代码片段：
<img [src]="'/api/images/tenant/sensors_dashboard_default_background.webp' | image | async" />这image pipeline 会自动将必要的身份验证标头添加到图像请求中，从而允许相同的相对图像 URL 为来自不同租户的用户返回不同的内容。
但是，不支持 Angular HTML 语法的自定义小部件或静态 HTML 块无法向请求添加身份验证标头。因此，每个平台镜像也有一个唯一的URL，用于无需身份验证即可下载镜像。使用以下代码片段，您可以将图像嵌入到基于纯 HTML 的组件中。此类组件包括 HTML 卡小部件、单元格内容函数等。
<img src="/api/images/public/ZA4biARtpnl970l0j8MMolRKM56fbpK1" alt=""Sensors" dashboard default background" />每个代码片段对其图像来说都是唯一的，您可以在“嵌入图像”窗口中找到相应的片段。
缓存
我们的图像 API 现在利用 ETag 来优化缓存，确保图像仅在更改时重新下载。这种方法可以显着节省带宽并缩短加载时间。虽然我们默认不应用 Cache-Control 标头，但用户可以通过环境变量灵活地自定义缓存行为，包括系统和租户映像的图像 ETag 缓存 TTL、最大缓存大小以及浏览器缓存 TTL 的设置。这些设置对于平衡减少服务器负载和确保内容新鲜度至关重要。
该平台提供环境变量来控制缓存行为：
- CACHE_SPECS_IMAGE_ETAGS_TTL: 控制图像 ETag 的缓存 TTL。默认设置为 44640 分钟（31 天），之后缓存将被清除。
- CACHE_SPECS_IMAGE_ETAGS_MAX_SIZE: 确定服务器上的最大 ETag 缓存大小。默认值为 10000。将其设置为 0 将禁用缓存。
- CACHE_SPECS_IMAGE_SYSTEM_BROWSER_TTL 和 CACHE_SPECS_IMAGE_TENANT_BROWSER_TTL: 这些设置分别管理系统和租户映像的浏览器缓存 TTL，默认值为 0 分钟，这意味着默认情况下禁用缓存。
这些设置允许管理员根据需要调整性能和内容新鲜度之间的平衡。
改进总结
通过解决仪表板中图像管理的挑战，我们的目标是提供一个更高效、更强大、更用户友好的平台。升级后 thingsboard.cloud，我们观察到仪表板的大小减少了 86%，并且一些仪表板现在的加载速度提高了一倍多。
