Можно ли добавить изображение в таблицу ячеек в таблицах дизайна Ant?

Я пытаюсь создать столбец, который в его записях будет включать маленькое изображение и имя. Как это сделать с помощью таблицы Ant Design?

https://ant.design/components/table/ Кажется, я не могу найти ничего связанного в документах или примерах.

javascript reactjs user-interface frontend ant-design-pro

14.11.2018 00:49

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

4 589

Ответы 3

Если вы использовали таблицу аналогично примерам, приведенным в их документации (с использованием массива источников данных)

Вы могли бы сделать что-то вроде этого

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

Вы ошиблись в своем ответе, пожалуйста, посмотрите ниже.

— 17.01.2020 10:12

15.04.2019 02:48

В принятом ответе есть ошибка, вот как это сделать

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

17.01.2020 10:11

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

Пожалуйста, уточните свой ответ о том, что вы делаете в этом блоке кода.

— 15.08.2021 18:12

15.08.2021 11:59