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

Question

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

同样，我可以根据需要正确加载其他所有内容，但不能加载图像。

谢谢!!

Answer 1

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

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