如何使用 React 从材料表单元格中数据流中的 url 渲染图像答案

【问题标题】：How to render images from a url in the data stream in material-table cell using React如何使用 React 从材料表单元格中数据流中的 url 渲染图像
【发布时间】：2020-01-17 12:51:03
【问题描述】：

我正在尝试从材料表单元格中的 URL 渲染图像，我能够使用 react-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,
},
];

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

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

【问题讨论】：

标签： react-table material-table react-typescript

【解决方案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,
},
];

感谢This Question

【讨论】：