我在弄清楚如何将图像从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"
}
同样,我可以根据需要正确加载其他所有内容,只是不能加载图像。
谢谢你!
3条答案
按热度按时间7jmck4yq1#
您可以使用
tableProps.row.original.PlayerImageURL
获取每一个的图像URL并将其插入到src
中jtw3ybtb2#
为了跟进Kaung的答案,如果你想同时设置图像和一些文本,完整的列定义如下所示:
oyt4ldly3#