5

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

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

4

3 回答 3

6

如果您以与其文档中显示的示例类似的方式使用该表。(使用数据源数组)

你可以做这样的事情

const columns = [
 {
    title: '',
    dataIndex: 'image_URL_here',
    render:  () => <img src={`image_URL_here`} />
 }
]
于 2019-04-15T00:48:27.647 回答
5

接受的答案有错误,这里你怎么做

{
      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然后将其与altand一起使用src

于 2020-01-17T09:11:21.847 回答
0

      {
          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>

于 2021-08-15T09:59:03.230 回答