I am trying to create a column that in his entries will include a small picture and a name. How can I do so using Ant Design's table?

/ponents/table/ I can't seem to find anything related in the docs or the examples.

I am trying to create a column that in his entries will include a small picture and a name. How can I do so using Ant Design's table?

https://ant.design/ponents/table/ I can't seem to find anything related in the docs or the examples.

• javascript
• reactjs
• user-interface
• frontend
• ant-design-pro

3 Answers 3

There is a mistake in the accepted answer , here how you do it

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

You need to declare theImageURL and then use it with the alt and src.

If you were using the table in a similar way as to the examples shown in their docs.(Using a datasource array)

You could do something like this

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

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

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