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

Question

我正在处理 Material 表以呈现带有图像的自定义列，就像 this example in the official docs.但是有一个小问题。示例在线图片from githubusercontent.com工作得很好，但如果我在我的机器上提供本地镜像的路径，它就不起作用。
在我的机器上有图像

有在线图片

图像尺寸或文件扩展名等没有问题，因为我从 githunusercontent.com 下载了相同的图像，并且在本地机器上也不起作用。
编辑
只是我在控制台中看到一条小错误消息说

Not allowed to load local resource 'file-path'What to do now?

Answer 1

要显示来自本地机器的图像，您可以通过以下方式进行:
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' },
        ]}
      />
    )
  }
}

注意:我已经下载了图像并将其重命名为 img.jpeg来自您在此处提供的 URL 并将其保存在 App.js 所在的同一目录中文件位于。