我正在尝试创建一个列,在他的条目中将包含一张小图片和一个名字。如何使用 Ant Design 的表格来做到这一点?
https://ant.design/components/table/ 我似乎在文档或示例中找不到任何相关内容。
我正在尝试创建一个列,在他的条目中将包含一张小图片和一个名字。如何使用 Ant Design 的表格来做到这一点?
https://ant.design/components/table/ 我似乎在文档或示例中找不到任何相关内容。
如果您以与其文档中显示的示例类似的方式使用该表。(使用数据源数组)
你可以做这样的事情
const columns = [
{
title: '',
dataIndex: 'image_URL_here',
render: () => <img src={`image_URL_here`} />
}
]
接受的答案有错误,这里你怎么做
{
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
and一起使用src
。
{
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>