ReactJS-图像未显示在Material-Table的自定义列中

问题描述

我正在材料表上使用this example in the official docs.之类的图像来渲染自定义列，但是存在一个小问题。示例在线映像from githubusercontent.com可以正常工作，但是如果我在计算机上提供本地映像的路径，则它将无法正常工作。

计算机上有图像

带有在线图片

图像尺寸或文件扩展名等都没有问题，因为我从githunusercontent.com下载了相同的图像，并且在本地计算机上也无法正常工作。

修改

只是在控制台中看到了一条错误消息

不允许加载本地资源“文件路径” 现在该怎么办？

解决方法

要显示本地计算机上的图像，您可以通过以下方式进行操作：

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',birthYear: 2017,birthCity: 34,]}
      />
    )
  }
}

注意：我已经从您在此处提供的URL下载了图像并将其重命名为img.jpeg，并将其保存在App.js文件所在的目录中。