我正在使用 Material 表来渲染带有图像的自定义列,就像this example in the official docs.但有一个小问题。示例在线图片from githubusercontent.com工作得很好,但如果我在我的机器上给出本地镜像的路径,它就不起作用。
在我的机器上使用图像
带有在线图片
图像尺寸或文件扩展名等没有问题,因为我从 githunusercontent.com 下载了相同的图像,并且在本地计算机上也不起作用。
编辑
只是我在控制台中看到了一条小错误消息
Not allowed to load local resource 'file-path' What to do now?
最佳答案
要显示本地计算机上的图像,您可以通过以下方式执行此操作:
App.js
文件:
import React from 'react';
import MaterialTable from 'material-table';
export default class App extends React.Component {
render() {
return (
<MaterialTable
title="Render Image Preview"
columns={[
{ title: 'Avatar', field: 'imageUrl', render: rowData => <img src={require('./img.jpeg')} style={{ width: 40, borderRadius: '50%' }} /> },
{ title: 'Name', field: 'name' },
{ title: 'Surname', field: 'surname' },
{ title: 'Birth Year', field: 'birthYear', type: 'numeric' },
{
title: 'Birth Place',
field: 'birthCity',
lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
},
]}
data={[
{ name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63, imageUrl: 'https://avatars0.githubusercontent.com/u/7895451?s=460&v=4' },
{ name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34, imageUrl: 'https://avatars0.githubusercontent.com/u/7895451?s=460&v=4' },
]}
/>
)
}
}
注意:我已从您在此处提供的 URL 下载了该图像并将其重命名为 img.jpeg
,并将其保存在 App.js 所在的同一目录中
文件所在位置。
关于javascript - ReactJS - 图像未显示在 Material 表的自定义列中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63824094/