如何使用 React 在 material-table 单元格中的数据流中渲染来自 url 的图像

Question

我正在尝试从 material-table 的单元格中的 URL 渲染图像，我能够使用 react-table 实现此行为但是没有为 material-table

找到足够的文档

感谢任何帮助，谢谢

<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,
},
];

以前当我使用 react-table 时，我做了以下使其工作并试图寻找类似的实现

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,
},
];

我知道这个函数与问题无关，但无论如何都会发布它供其他人在反应中使用它-table

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

Answer 1

当我提到一个不同的问题时，我找到了解决方案，而这个问题有我的解决方案

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,
},
];

感谢

如何使用 React 在 material-table 单元格中的数据流中渲染来自 url 的图像

How to render images from a url in the data stream in material-table cell using React

react-table

material-table

react-typescript