ReactJS - 圖像未顯示在 Material-Table 的自定義列中

Question

我正在使用材料表來呈現帶有圖像的自定義列，就像官方文檔中的這個示例一樣。 但是有一個小問題。 來自 githubusercontent.com的示例在線圖像運行良好，但如果我在我的機器上提供本地圖像的路徑，它就不起作用。

在我的機器上有圖像

帶在線圖片

圖像尺寸或文件擴展名等沒有問題，因為我從 githunusercontent.com 下載了相同的圖像，並且在本地機器上也不起作用。

編輯

只是我在控制台中看到一條小錯誤消息說

不允許加載本地資源“文件路徑”現在該怎么辦？

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' },
        ]}
      />
    )
  }
}

注意：我已經下載了圖像並從您在此處提供的 URL 將其重命名為img.jpeg ，並將其保存在App.js文件所在的同一目錄中。