ThingsBoard如何修改LOGO

发布时间：2021-11-19 17:48:18 作者：小新
来源：亿速云阅读：759

# ThingsBoard如何修改LOGO

## 前言

ThingsBoard作为一款开源的物联网平台，默认使用自带的品牌LOGO。但在实际企业应用中，我们通常需要替换为自定义LOGO以符合公司品牌形象。本文将详细介绍在ThingsBoard社区版中修改系统LOGO的完整流程，涵盖前端资源替换、缓存清理及常见问题解决方法。

---

## 一、准备工作

### 1.1 环境要求
- ThingsBoard社区版（本文以3.4.2版本为例）
- 管理员账号权限
- 新LOGO文件（推荐尺寸：`220x40px`，格式：PNG透明背景）

### 1.2 文件位置说明
ThingsBoard的LOGO资源位于前端静态文件中：
```bash
/usr/share/thingsboard/static/assets/logo_white.png
/usr/share/thingsboard/static/assets/logo_black.png

注：白色LOGO用于深色主题，黑色LOGO用于浅色主题

二、详细操作步骤

2.1 备份原始文件（重要！）

sudo cp /usr/share/thingsboard/static/assets/logo_white.png /usr/share/thingsboard/static/assets/logo_white.png.bak
sudo cp /usr/share/thingsboard/static/assets/logo_black.png /usr/share/thingsboard/static/assets/logo_black.png.bak

2.2 上传新LOGO文件

使用SFTP或命令行上传准备好的LOGO文件到服务器：

sudo cp /path/to/your/new_logo.png /usr/share/thingsboard/static/assets/logo_white.png
sudo cp /path/to/your/new_logo_dark.png /usr/share/thingsboard/static/assets/logo_black.png

2.3 修改文件权限

确保新文件具有正确权限：

sudo chown thingsboard:thingsboard /usr/share/thingsboard/static/assets/logo_*.png
sudo chmod 644 /usr/share/thingsboard/static/assets/logo_*.png

2.4 清理浏览器缓存

由于静态资源会被浏览器缓存，需要强制刷新： 1. Chrome/Firefox: Ctrl+Shift+R 2. 或清除整个浏览器缓存

2.5 重启服务（可选）

如果修改未生效，重启ThingsBoard服务：

sudo systemctl restart thingsboard

三、高级配置

3.1 修改登录页LOGO

登录页LOGO位于单独路径：

/usr/share/thingsboard/static/assets/logo_title_white.png
/usr/share/thingsboard/static/public/logo_title_black.png

3.2 调整LOGO尺寸

通过修改CSS文件调整显示尺寸：

/* 文件位置：/usr/share/thingsboard/static/web.config */
.tb-logo {
  width: 220px;
  height: 40px;
}

3.3 Docker环境修改

对于Docker部署，需重建镜像：

COPY custom_logo.png /usr/share/thingsboard/static/assets/logo_white.png

四、常见问题解决

4.1 修改后不生效

检查文件路径是否正确
确认文件权限（ls -l /usr/share/thingsboard/static/assets/）
清除CDN缓存（如果使用）

4.2 图片显示模糊

确保原始图片分辨率足够（2倍于显示尺寸）
使用SVG格式可获得更好效果

4.3 企业版注意事项

企业版可通过管理界面直接上传：

系统设置 → 品牌配置 → 上传LOGO

五、最佳实践建议

双色版本：准备深/浅色两套LOGO以适应不同主题
文件命名：保持与原始文件同名避免代码修改
版本控制：将自定义LOGO纳入部署脚本
响应式测试：在不同设备上验证显示效果

结语

通过本文指导，您应该已经成功将ThingsBoard的LOGO替换为自定义品牌标识。如需进一步定制UI，可继续研究ThingsBoard的前端源码修改。记得在重大版本升级时重新应用这些更改，因为升级可能会覆盖静态资源文件。

注意：本文适用于ThingsBoard社区版，企业版用户可通过管理界面更便捷地完成此操作。 “`

该文档包含： - 分步骤的详细操作指南 - 不同部署方式的注意事项 - 常见问题解决方案 - 格式化的代码块和路径说明 - 必要的警告和提示信息

实际可根据具体ThingsBoard版本和环境进行调整。