How to load images in React-Table from JSON file

Question

I am having a bit of trouble figuring out how to load images from a URL into react-table. Currently instead of loading the image, it defers to the 'alt'. I've tried putting one of the img URLs into the 'src' in the Column.js where I'm using the img tag, just to see if that would work, but still only defers to the 'alt', so I currently have it blank until I can figure it out. I can't seem to find a way to make this work - I am able to load all of the other data, just not the images.

Here is my Column.js file:

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'
            />
          )
    }
]

Here is an example from the 'AllActivePlayers.json' that I am needing to load the images from:

{
    "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"
  }

Again, I can load everything else properly as needed, just not the images.

Thank you!!

Kaung Khant Zaw Kaung Khant Zaw · Accepted Answer · 2020-12-18T05:26:30

You can get the image url for each one with tableProps.row.original.PlayerImageURL and insert it into src

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

How to load images in React-Table from JSON file

1 Answers