Блог

У меня возникли небольшие проблемы с выяснением того, как загружать изображения с URL-адреса в react-table. В настоящее время вместо того, чтобы загружать изображение, оно откладывается на ‘alt’. Я попытался поместить один из URL-адресов img в «src» в Column.js там, где я использую тег img, просто чтобы посмотреть, сработает ли это, но по-прежнему используется только ‘alt’, поэтому в настоящее время он у меня пустой, пока я не смогу разобраться. Кажется, я не могу найти способ заставить это работать — я могу загружать все остальные данные, только не изображения.

Вот мой Column.js файл:

 import ColumnFilter from "./ColumnFilter";
import AllActivePlayers from '../../../utils/AllActivePlayers.json';

export const Columns = [
    {
        Header: 'ID',
        accessor: 'PlayerID',
        Filter: ColumnFilter,
        disableFilters: true
    },
    {
        Header: 'Name',
        accessor: 'Name',
        Filter: ColumnFilter,
        disableFilters: true
    },
    {
        Header: 'Position',
        accessor: 'Position',
        Filter: ColumnFilter
    },
    {
        Header: 'Team',
        accessor: 'Team',
        Filter: ColumnFilter,
        disableFilters: true
    },
    {
        Header: 'Player Image',
        accessor: 'PlayerImageURL',
        Filter: ColumnFilter,
        disableFilters: true,
        Cell: props => (
            <img
              src={}
              width={60}
              alt='Player'
            />
          )
    }
]
 

Вот пример из файла ‘AllActivePlayers.json’, из которого мне нужно загрузить изображения:

 {
    "PlayerID": 21802,
    "Team": "Husko",
    "Position": "Dog",
    "Name": "Surprised Husky",
    "PlayerImageURL": "https://i.ytimg.com/vi/uRXmA10PYM0/maxresdefault.jpg"
  },
  {
    "PlayerID": 21802,
    "Team": "Husko",
    "Position": "Dog",
    "Name": "Grumpy Husky",
    "PlayerImageURL": "https://i.pinimg.com/originals/9e/f7/bc/9ef7bc75d2fea5cc38b0889d2bc499e8.jpg"
  }
 

Опять же, я могу правильно загружать все остальное по мере необходимости, только не изображения.

Спасибо!!

Вы можете получить URL-адрес изображения для каждого из tableProps.row.original.PlayerImageURL них и вставить его в src

         Cell: tableProps => (
            <img
              src={tableProps.row.original.PlayerImageURL}
              width={60}
              alt='Player'
            />
          )
 

Чтобы продолжить ответ Каунга, если вы хотите одновременно задать изображение и некоторый текст, полное определение столбца будет выглядеть следующим образом:

     columns: [
      {  Header: 'Name', Cell: tableProps  => (
        <div><img src={tableProps.row.original.PlayerImageURL} />{tableProps.row.original.PlayerName}</div>
      )},
    ],