表格里怎么渲染后端传来URL的图标

后台操作系统里面经常会出现表格，为了丰富页面表格里面有小图标需要渲染也是很常见的一种操作。
但是图标毕竟和文字不同，怎么渲染是个问题。
我遇到的情况是后端直接返回一个URL地址，我需要在前端设置一下让这个获取到的URL变为图标展示出来。
表格和列表的渲染方法还有小小的不同，我们先来说说表格：

render(){
    // 解构数据
    let { currencyList } = this.state;
    console.log("我是解构的数据",currencyList)
    //页面表格表头
    const columns = [{
      title: 'Code',
      dataIndex: 'uniqueCode',
      key: 'uniqueCode',
      width: 60,
      align: 'center',
      // 是否显示排序
      sorter: true,
    },{
      title: 'icon',
      dataIndex: 'icon',
      key: 'icon',
      width: 60,
      align: 'center',
      // 用以渲染图标
      render: (text) => (
        <div>
      // 设置图标的大小样式
          <img style={{width: 30, height: 30}} src={text} alt=""/>
        </div>
      )
    }];

在表头里面这样设置之后，渲染数据源的时候，直接渲染就可以获取到网址设置的图标。
大致代码如下：

return(
   <div>
       <Table
          // 渲染表头
          columns={columns}
          // 调用数据源
          dataSource={currencyList}
        />
   </div>
)

列表中的图标设置和表格中的略有不同，我这个是因为数据长度未知，所以用map循环写的，代码如下：

   // 循环获取数据
    const { accountsList } = this.state;
    //设置初始值为空
    let list = [];
    //使用map循环渲染页面列表
    accountsList.map((account) => {
     // 将所有数据push到数组list中
      list.push(
        // 栅格化布局
        <Row>
          <Col
            className="account"
            span={7}
          >
            <div>
                // 设置图标大小和样式
                <img style={{width: 50, height: 50, margin:10 }} src={account.icon} /> 
            </div>
          </Col>
          // 分割线
          <Divider />
        </Row>
      )
    })