在复杂报表设计器中，单元格可通过 HTML 显示 模式渲染 <img> 标签，从而在预览、打印及 PDF/Excel/Word 导出中显示图片。
适用角色：数据分析师、报表设计人员。
一、核心概念
| 概念 | 说明 |
|---|---|
| 内容类型 | 在右侧 「单元格内容」 中设置，如「表达式」「图片」等 |
| 显示方式 | 在右侧 「单元格属性」→「显示」 中设置；显示图片须选 HTML |
| 默认 | 按纯文本显示，<img ...> 不会渲染为图片 |
| HTML | 按 HTML 渲染，支持 <img> 等标签 |
注意：仅将「显示」设为 HTML 还不够，单元格内容本身必须是合法的 HTML 字符串（见下文两种方式）。
二、表达式引号规则（必读）
复杂报表表达式中的字符串用引号包裹，外层引号与 HTML 属性引号必须错开，不能混用同一种引号，否则表达式解析失败或 src 被截断。
| 写法 | 含义 |
|---|---|
外层用 单引号 '...' | 适合 HTML 属性内使用 双引号，如 src="http://..." |
外层用 双引号 "..." | 适合 HTML 属性内使用 单引号，如 width='100%' |
| 拼接单元格 | 使用 +，单元格引用不加引号，如 + B1 + |
正确示例
'<img src="http://example.com/a.jpg"/>'
"<img width='100%' height='100%' src='" + B1 + "'>"错误示例
"<img src="http://example.com/a.jpg"/>" ← 外层与 src 均为双引号，冲突
'<img width='100%' src='' + B1 + ''>' ← 属性单引号与外层单引号冲突三、方式一：网络图片（URL）
适用于图片已部署在可访问的 HTTP/HTTPS 地址（公网或内网均可，须保证预览环境能访问该地址）。
步骤
- 打开 数据分析 → 报表，进入目标复杂报表的 设计器。
- 选中要显示图片的单元格（如
A1）。 - 右侧切换到 「单元格内容」：
- 内容类型 选择 「表达式」。
- 在表达式框中输入（注意引号）：
'<img src="http://你的域名或IP/路径/图片.jpg"/>'- 外层：单引号
'...' src属性：双引号"..."- 将
http://你的域名或IP/路径/图片.jpg替换为真实图片地址
- 右侧切换到 「单元格属性」：
- 显示 选择 「HTML」（不要选「默认」）。
- 按需调整该行高、该列列宽，使图片显示区域足够大。
- 保存 报表，点击 预览 确认图片正常显示；再验证 打印 / 导出 PDF 等。
表达式模板（复制后改 URL）
'<img src="http://***.jpg"/>'说明
- 本方式不需要点击工具栏「插入图片」；内容完全由表达式中的
<img>决定。 - 若预览有图、导出无图，请确认已从预览页发起导出，且图片 URL 在服务器端可访问。
四、方式二：Base64 图片（隐藏字段 + 表达式引用）
适用于图片以 Base64 形式存放在单元格中，在另一单元格用表达式拼出 <img> 展示（常见做法：数据存 B 列、展示在 C 列，并隐藏 B 列）。
4.1 在 B1 存放 Base64 图片
- 打开报表 设计器，选中单元格 B1。
- 插入图片（任选其一）：
- 工具栏 点击 「插入图片」 图标，在本地选择图片文件；或
- 右侧 「单元格内容」 → 内容类型 选择 「图片」，按提示选择本地图片。
- 选择文件后，系统会将图片转为 Base64（
data:image/...;base64,...）写入 B1，内容类型 为 「图片」。 - B1 的 「显示」 可保持 「默认」（该列即将隐藏，仅作数据存储）。
4.2 隐藏 B 列
- 在表头 B 列列标 上 右键。
- 选择 「隐藏」。
- 预览时 B 列不可见，但表达式仍可引用
B1中的图片数据。
4.3 在 C1 用表达式显示图片
- 选中单元格 C1。
- 右侧 「单元格内容」：
- 内容类型 选择 「表达式」。
- 输入以下表达式（引号必须与模板一致）：
"<img width='100%' height='100%' src='" + B1 + "'>"片段 引号说明 整段表达式 外层使用 双引号 "..."包裹各字符串片段width='100%'、height='100%'HTML 属性使用 单引号 src='…'src两侧为 单引号，中间拼接 B1（不加引号） - 右侧 「单元格属性」：
- 显示 选择 「HTML」。
- 调整 C1 所在行高、列宽，使图片铺满单元格（
width/height='100%'随单元格尺寸缩放）。 - 保存 → 预览 → 验证 打印 / 导出。
表达式模板（复制使用）
"<img width='100%' height='100%' src='" + B1 + "'>"结构示意
B1（图片 / Base64，列隐藏） → 仅存储，不展示
C1（表达式 + HTML 显示） → 预览与导出所见图片五、两种方式对比
| 对比项 | 方式一：URL | 方式二：Base64 + 引用 |
|---|---|---|
| 图片来源 | 网络地址 | 本地上传 → Base64 存 B1 |
| 典型单元格 | 单格表达式 | B1 存图 + C1 展示 |
| 表达式示例 | '<img src="http://..."/>' | "<img width='100%' height='100%' src='" + B1 + "'>" |
| 外层引号 | 单引号 | 双引号 |
| HTML 属性引号 | 双引号 | 单引号 |
| 隐藏列 | 不需要 | 建议隐藏 B 列 |
六、常见问题
1. 预览是图片，单元格里却是一串 <img ...> 文本？
显示 仍为 「默认」。请改为 「HTML」 后保存再预览。
2. 预览正常，导出 PDF/Excel/Word 失败或无图？
- 方式一：检查图片 URL 在服务器环境是否可访问（导出在服务端拉图）。
- 方式二：确认 C1 为 HTML 显示，且表达式与上文模板一致；建议从预览页点击导出。
- 确认 B1 已成功上传图片（内容类型为「图片」），且 C1 表达式中为
B1而非B2等。
3. 表达式保存报错或图片不显示？
检查 引号是否成对、内外是否错开（见第二节）。方式二只允许使用模板中的这一种引号组合，不要擅自把外层改成单引号。
4. 图片太小或变形？
- 调整单元格 行高、列宽。
- 方式二已使用
width='100%' height='100%'，会随 C1 单元格尺寸缩放；请放大 C1 所在行列。
七、操作检查清单
- 展示单元格 内容类型 为「表达式」（方式一、二）或 B1 为「图片」（方式二）
- 展示单元格 显示 为 「HTML」
- 表达式引号与文档模板 完全一致
- 方式二：B 列已隐藏，C1 行高列宽合适
- 已保存并在预览中确认图片
- 已验证打印或导出结果