Как визуализировать изображения из URL в потоке данных в ячейке таблицы материалов с помощью React - PullRequest
Новая
       23

Как визуализировать изображения из URL в потоке данных в ячейке таблицы материалов с помощью React

0 голосов
/ 17 января 2020

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

спасибо, спасибо 

<MaterialTable
        icons= {{Icons}}
        columns={props.columns}
        data={props.data}
        title="My List"
        style={{ height: props.height }}
        options={{
          paging: true,
          pageSize:20,
          search: false,
          pageSizeOptions: [20],
          doubleHorizontalScroll: true,
          maxBodyHeight: '450px'
        }}
        localization={{
          pagination: {
            labelDisplayedRows: `{from}-{to} of ${total}`,
          }
        }}
        onChangePage={()=>requestNewData()}

      />

Вот столбцы, которые я определил 

export const MyListColumns = [
{
  title: 'Name',
  field: 'name',
  minWidth: 100,
  maxWidth: 400,
},
{
  title: 'Location',
  field: 'address',
  minWidth: 100,
  maxWidth: 400,
},
{
  title: 'Zip Code',
  field: 'zipCode',
  minWidth: 100,
  maxWidth: 400,
},
];

Ранее, когда я использовал реактивную таблицу, я сделал следующее, чтобы она заработала, и попытался найти похожую реализацию. 

export const MyListColumns = [
{
  title: 'My Image',
  field: 'myIconUrl',
  minWidth: 100,
  maxWidth: 150,
  Cell: (myIconUrl) => (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '80px'
      }}
    >
      <img
        style={{ height: 'auto', maxWidth: '100px' }}
        alt="my image"
        src={
          removeModifiersFromUrl(
            `${myIconUrl}`
          )
        }
      ></img>
    </div>
  )
},
{
  title: 'Name',
  field: 'name',
  minWidth: 100,
  maxWidth: 400,
},
{
  title: 'Location',
  field: 'address',
  minWidth: 100,
  maxWidth: 400,
},
{
  title: 'Zip Code',
  field: 'zipCode',
  minWidth: 100,
  maxWidth: 400,
},
];

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

const removeModifiersFromUrl = (url) => url.substring(0, url.indexOf('?'));

1 Ответ

0 голосов
/ 17 января 2020

Я нашел решение, когда имел в виду другой вопрос, у которого у моего вопроса было решение 

export const MyListColumns = [
{
  title: 'My Image',
  field: 'myIconUrl',
  minWidth: 100,
  maxWidth: 150,
  render: (row) => (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '80px'
      }}
    >
      <img
        style={{ height: 'auto', maxWidth: '100px' }}
        alt="my image"
        src={
          removeModifiersFromUrl(
            row.myIconUrl
          )
        }
      ></img>
    </div>
  )
},
{
  title: 'Name',
  field: 'name',
  minWidth: 100,
  maxWidth: 400,
},
{
  title: 'Location',
  field: 'address',
  minWidth: 100,
  maxWidth: 400,
},
{
  title: 'Zip Code',
  field: 'zipCode',
  minWidth: 100,
  maxWidth: 400,
},
];

Кредиты Этот вопрос

...