ReactJS - Image is not shown in a custom column of Material-Table

Question

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.

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.

Edit

Just I saw a little error message in the console saying

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

Shahnawaz Hossan · Accepted Answer · 2020-09-10T08:25:04.007

2

To show the image from the local machine you can do it in the following way:

App.js file:

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.

edited Sep 10 '20 at 08:25

answered Sep 10 '20 at 07:37

Shahnawaz Hossan

2,695
2
13
24

1

Can I see your `package.json` file? It's working for me. I've checked. It would be better if you provide the code that you've tried. – Shahnawaz Hossan Sep 10 '20 at 08:10
Ok Thanks for your time. There might be some other issue like lazy leading or some other stuff like that. I'll check that myself :) – DevLoverUmar Sep 10 '20 at 08:13
1

upvoted for now. Will accept your answer once done on my end as well :) – DevLoverUmar Sep 10 '20 at 08:14
1

It's ok, hope you can figure that out soon. :) – Shahnawaz Hossan Sep 10 '20 at 08:15
It worked for me by reading the Base64String representation of image using Javascript FileReader and assigning that to image src, as New version of Chrome don't allow to use local file paths – DevLoverUmar Sep 17 '20 at 20:52
1

Glad to hear that. Congratulations. – Shahnawaz Hossan Sep 18 '20 at 06:27

ReactJS - Image is not shown in a custom column of Material-Table

1 Answers1