reactjs 如何从JSON文件加载React-Table中的图像

oewdyzsn  于 2023-04-20  发布在  React
关注(0)|答案(3)|浏览(86)

我在弄清楚如何将图像从URL加载到react-table中时遇到了一些麻烦。目前,它不是加载图像,而是遵循“alt”。我尝试将其中一个img URL放入我使用img标签的Column.js中的“src”中,只是为了看看是否有效,但仍然只遵循“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"
  }

同样,我可以根据需要正确加载其他所有内容,只是不能加载图像。
谢谢你!

7jmck4yq

7jmck4yq1#

您可以使用tableProps.row.original.PlayerImageURL获取每一个的图像URL并将其插入到src

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

jtw3ybtb2#

为了跟进Kaung的答案,如果你想同时设置图像和一些文本,完整的列定义如下所示:

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

oyt4ldly3#

<Avatar
      src={
        `https://site.online/uploads/` + `${logo?.file.link}`
      }
    />

相关问题