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

Posted 2023-03-27

【中文标题】如何从 JSON 文件加载 React-Table 中的图像

【英文标题】：How to load images in React-Table from JSON file

【发布时间】：2021-03-17 12:56:49

【问题描述】：

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

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

谢谢！！

【参考方案1】：

您可以使用tableProps.row.original.PlayerImageURL获取每张图片的url并将其插入src

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