logo

S2

  • 使用文档
  • API 文档
  • 图表示例
  • 在线体验
  • 更新日志
  • 所有产品antv logo arrow
  • 2.x
  • 简介
  • 快速上手
  • 基础教程
    • 基本概念
      Updated
    • 表形态
      • 透视表
        Updated
      • 明细表
        Updated
    • 字段标记
      Updated
    • 小计总计
    • 排序
      • 基础排序
        Updated
      • 组内排序
        Updated
    • 主题配置
      Updated
    • Tooltip
      Updated
    • 数据格式化
      New
    • 多行文本
      New
    • 国际化
    • 分页
      New
  • 进阶教程
    • 单元格渲染类型
      • 链接
      • 图片
        New
      • 视频
        New
      • 迷你图表
      • 结合@antv/g2
      • 自定义渲染
    • 自定义
      • 自定义 Hook
        Updated
      • 自定义行列头分组
        New
      • 自定义 Icon
        Updated
      • 自定义单元格对齐方式
        Updated
      • 自定义单元格宽高
        Updated
      • 自定义排序操作
        Updated
      • 自定义折叠/展开节点
        New
    • 交互
      • 基础交互
        Updated
      • 自定义交互
      • 隐藏列头
        Updated
      • 行列宽高调整
        Updated
      • 合并单元格
      • 滚动
        Updated
      • 复制与导出
        New
      • 高亮/选中单元格
        New
    • 分析组件
      • 简介
        New
      • 高级排序
        Updated
      • 维度切换
        Updated
      • 导出
        Updated
      • 分页
        Updated
      • 维度下钻
        Updated
    • 表格组件
      • 编辑表
      • 趋势分析表
        Updated
    • 高清适配
      Updated
    • 获取表格实例
    • 表格自适应
    • 获取单元格数据
      Updated
    • 注册 AntV/G 插件
      New
    • 透视组合图
      Experimental
    • Vue 3.0 组件 (停止维护)
  • 扩展阅读
    • 数据流处理
      • 透视表
      • 明细表
    • 布局流程
      • 透视表
      • 明细表
    • 性能介绍
      Updated
  • 贡献指南
  • 常见问题
  • S2 2.0 升级指南

图片

上一篇
链接
下一篇
视频

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

有时在表格中直接基于URL展示图片,会极大的优化工作流程,提高工作效率。基于 AntV/G 强大的渲染能力,S2 可以在行头、列头、数据单元格内绘制图片。

图片渲染介绍

请阅读 AntV/G Image 图片 相关章节。

使用

在S2DataConfig.meta中,添加图片渲染相关配置项:

const s2DataConfig = {
meta: {
field: string,
name: string,
renderer: {
type: 'IMAGE', // 单元格渲染为图片
fallback?: string, // 渲染失败时的兜底图片地址
clickToPreview?: boolean, // 是否开启点击预览
timeout?: number, // 图片加载超时时间,默认为10秒
config?: Partial<ImageStyleProps> // G的图片配置,https://g.antv.antgroup.com/api/basic/image
}
}
}

交互

  1. 点击图片主体,可在当前页面预览,并触发 S2Event.GLOBAL_PREVIEW_CLICK 事件。预览时支持浏览器原生的右键复制图片地址等操作,点击空白区域可关闭预览。预览样式可以通过主题配置修改,如:

    s2.setTheme({
    preview: {
    overlay: {
    backgroundColor: 'red',
    },
    mediaContainer: {
    height: '100px',
    },
    },
    });
  2. 点击图片单元格的非图片主体区域,可触发原本的点击事件,以及选中、树状展开、下钻等事件。Tooltip 会展示原始的文本信息。

  3. 图片单元格的复制与导出会显示为原文本数据而不是图片

  4. 兼容表头表身的水平方向对齐方式

  5. 默认会按照图片原始大小比例显示,若调整单元格宽高,图片也会自适应调整尺寸