html表格怎么插入照片,antd的Table组件如何插入图片

在项目中有一个需求是在Table组件中插入图片，但是Table有自己封装的语法，查了查资料才整出来，完整代码如下：

import React, { Component } from 'react';

import {Input,Select,DatePicker,Button,Table,Pagination} from 'antd';

import axios from "axios";

class Monitor extends Component{

render(){

const columns=[

//....省略

{

title: '人脸图片1',

dataIndex: 'filePathOne',

key: 'filePathOne',

render: (record) =>

// console.log("record的内容",record)

},{

title: '人脸图片2',

dataIndex: 'filePathtwo',

key: 'filePathtwo',

render: (record) =>

}]

return(

columns={columns}

dataSource={xxxxxx} //这块换成你项目中储存的变量

pagination={false}/>

)

}

export default Monitor;

record是Table方法中内置的参数，record显示的是你自己定义的dataIndex中参数的内容；

我在项目中打印出来了record,打印结果如下：

record内容.jpg

打印的内容就是后台返回给我的url，我只需要将它放在img标签中即可

实现的效果如下：

图片显像.jpg

html表格怎么插入照片,antd的Table组件如何插入图片相关推荐

antd中table组件中如何进行换行操作（react中）
antd中table组件中如何进行换行操作(react中) 说明效果数据代码说明 react项目,遇到某字段对应的单元格内需要换行. 最初想偷懒,尝试了在数据中加入回车.使用模板字符串.转义字 ...
antD的table组件，长度过长使用省略号表示
目录解决的问题一.antD是什么? 二.使用步骤 1.使用render里面的参数(text)进行长度判断 2.结果总结解决的问题 table组件中,如果一个内容长度大于5,则用省略号显示多余的 ...
vue 带全选和多选的表格怎么写_vue+element-ui里面table组件多选框实现批量操作
vue+element-ui里面table组件多选框实现批量操作有时候人不是被困难难倒的,是被自己蠢哭的...官方文档用到某个地方的时候,才感觉对这个方面的理解才会加深一点,还是要记录一下这个地方! ...
给antd的Table组件添加总计和平均值
前言遇到一个需求,应该挺常见但是我却没怎么遇到,也费了不少功夫也解决,记录一下. 需求很简单,是个后台管理系统项目,要做个表格,(什么,这么简单,直接组件库里面复制一下Tabel不就完事了) 哈哈, ...
【Antd】Table组件数据重新渲染后筛选项如何清空
先来说一下我遇到的场景: 如上图,在点击操作按钮之后,会重新请求列表数据,列表数据更新.这个时候如果我先筛选了Age列, 再点击操作按钮更新数据会发现,列表上渲染的数据是经过筛选之后的,筛选项并没有被 ...
antd 下拉框怎么联动_Antd的Table组件嵌套Table以及选择框联动操作
一.需求在使用Table组件嵌套Table时,父子Table的选择框需要联动,即父Table选中,该行下的子Table需要全选中,某一个子Table全部选中,则该子Table所在的父Table那一行 ...
react ，ant Design UI中table组件合并单元格并展开详情的问题
需求:购物车订单列表,如图: 一:单元格合并遇到这种你会怎么办呢? 单元格合并? 还是其他的方法? 下面是我的处理方式,就是在table 组件的columns上处理,这里拿商品举例,其余的类似, ...
从一个表格render方法问题看React函数组件的更新
从一个表格render方法问题看React函数组件的更新最近在开发中碰到了一个现象觉得很有典型能作为例子所以给大家分享一下,从这个现象我们能很清楚的看到函数组件的更新的特点,以及我们应该如何去理解和 ...
AntD02 Table组件的使用
1 前提准备 1.1 创建一个angular项目 1.2 将 Ant Design 整合到 Angular 项目中 1.3 官方文档点击前往 2 简单使用 <nz-table#rowSelec ...

html表格怎么插入照片,antd的Table组件如何插入图片

html表格怎么插入照片,antd的Table组件如何插入图片相关推荐

最新文章

热门文章