[英]ReactJS - Image is not shown in a custom column of Material-Table
I'm working on material-table to render a custom column with images just like this example in the official docs.我正在使用材料表来呈现带有图像的自定义列,就像官方文档中的这个示例一样。 But there is a little problem.但是有一个小问题。 The example online image from githubusercontent.com is working perfectly fine but if I give the path of a local image on my machine it don't work. 来自 githubusercontent.com的示例在线图像运行良好,但如果我在我的机器上提供本地图像的路径,它就不起作用。
With Image on my machine在我的机器上有图像
With online Image带在线图片
There is no problem with image dimensions or file extension etc. as I downloaded the same image from githunusercontent.com and that is not working on local machine as well.图像尺寸或文件扩展名等没有问题,因为我从 githunusercontent.com 下载了相同的图像,并且在本地机器上也不起作用。
Edit编辑
Just I saw a little error message in the console saying只是我在控制台中看到一条小错误消息说
Not allowed to load local resource 'file-path' What to do now?不允许加载本地资源“文件路径”现在该怎么办?
To show the image from the local machine you can do it in the following way:要显示来自本地计算机的图像,您可以通过以下方式进行操作:
App.js
file: 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' },
]}
/>
)
}
}
Note: I've downloaded the image and renamed it as img.jpeg
from the URL you've given here and kept it in the same directory where App.js
file is located.注意:我已经下载了图像并从您在此处提供的 URL 将其重命名为img.jpeg
,并将其保存在App.js
文件所在的同一目录中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.