Блог

Я работаю над material-table, чтобы отобразить пользовательский столбец с изображениями, точно такими же, как этот пример в официальных документах. Но есть небольшая проблема. Пример онлайн-изображения из githubusercontent.com работает отлично, но если я укажу путь к локальному изображению на моем компьютере, это не сработает.

С изображением на моем компьютере

С онлайн-изображением

Нет проблем с размерами изображения или расширением файла и т.д., Поскольку я загрузил то же изображение с githunusercontent.com и это также не работает на локальном компьютере.

Редактировать

Просто я увидел небольшое сообщение об ошибке в консоли, говорящее

Не разрешено загружать локальный ресурс ‘file-path’ Что теперь делать?

Чтобы отобразить изображение с локального компьютера, вы можете сделать это следующим образом:

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=460amp;v=4' },
          { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34, imageUrl: 'https://avatars0.githubusercontent.com/u/7895451?s=460amp;v=4' },
        ]}
      />
    )
  }
}
  

Примечание: я загрузил изображение и переименовал его как img.jpeg с указанного вами здесь URL-адреса и сохранил его в том же каталоге, где находится App.js файл.