是否可以将图像添加到 Ant Design Tables 中的单元格表中？

Posted 2023-03-07

【中文标题】是否可以将图像添加到 Ant Design Tables 中的单元格表中？

【英文标题】：Is it possible to add an image to a cell Table in Ant Design Tables?

【发布时间】：2019-04-16 21:13:32

【问题描述】：

我正在尝试创建一个列，在他的条目中将包含一张小图片和一个名字。 如何使用 Ant Design 的表格来做到这一点？

https://ant.design/components/table/ 我似乎在文档或示例中找不到任何相关内容。

【参考方案1】：

如果您使用表格的方式与其文档中显示的示例类似。（使用数据源数组）

你可以这样做

const columns = [
 
    title: '',
    dataIndex: 'image_URL_here',
    render:  () => <img src=`image_URL_here` />
 
]

【讨论】：

您的回答有误，请往下看。

【参考方案2】：

接受的答案有错误，这里是怎么做的

      title: "Image",
      dataIndex: "ImageURL",  // this is the value that is parsed from the DB / server side
      render: theImageURL => <img alt=theImageURL src=theImageURL />  // 'theImageURL' is the variable you must declare in order the render the URL

您需要声明theImageURL，然后将其与alt 和src 一起使用。

【参考方案3】：

      
          title: 'Image',
          dataIndex: 'avatar',
          width: 50,
          maxWidth: 50,
          render: (t, r) => <img src=`$r.avatar` />
        ,

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.1/umd/react-dom.production.min.js"></script>

【讨论】：

请详细说明您在该代码块中做了什么。