时间戳

首页 > 解决方案 > 如何从 JSON 文件加载 React-Table 中的图像

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

问题描述

我在弄清楚如何将图像从 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"
  }

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

谢谢！！

标签： jsonreactjsimagereact-table

解决方案

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

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

推荐阅读