Convert Blob to image inside Cell in React

Question

The value can be accessed like: myObj.value and it is blob:http://localhost:3000/304dbb9b-6465-4dc8-8b2c-5a25fae7e452

Cell component:

export default class Cell extends React.PureComponent { render() { const { label, value } = this.props; return ( <td> {label && ( <div> <span className="cell-label">{label}</span> <br /> </div> )}<span>{value}</span> )} </td> ); } }

if I do it like in the following example, it shows the string value and I want to show the actual image. Is this possible?

<tr> {myObj.map(item => ( <Cell key={myObj.indexOf(item)} label={item.label} value={item.value} //I guess something here must be changed /> ))} </tr>

agm1984 · Accepted Answer · 2020-06-05 15:51:34Z

Try converting the blob to dataUrl:

URL.createObjectURL(blob)

Source: https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

Then you can load it as an image:

<img src={URL.createObjectURL(dataUrl)} />

or in your code something like:

<tr> {myObj.map(item => ( <Cell key={myObj.indexOf(item)} label={item.label} value={URL.createObjectURL(item.value)} /> ))} </tr>

I'm hoping you can translate that into what you need. You can either transform the blob inside the component that renders <Cell /> or inside Cell. It sounds appropriate to put it inside Cell, so no other component has to care about the implementation details of the blob to dataUrl logic.

If you put it inside Cell, then you will need to call it like this:

// URL.createObjectURL(this.props.blob) export default class ImageCell extends React.PureComponent { render() { const { label, blob } = this.props; return ( <td> {label && ( <div> <span className="cell-label">{label}</span> <br /> </div> )} <span> <img src={URL.createObjectURL(blob)}> </span> )} </td> ); } }

...

<tr> {myObj.map(item => ( <ImageCell key={myObj.indexOf(item)} label={item.label} blob={item.value} /> ))} </tr>

so I wrote blobToDataUrl method inside Cell component, at the beginning before render and it says: Expected 'this' to be used by class method 'blobToDataURL' I don't know where to put this
So it is inside a stateless, functional component. I will edit my answer.
I looked closer at your question, and the main issue is your code is not distinguishing between types of data that can go into the table cell. <span>{value}</span> is for text values. You need an image value, so you could make a new component or add logic to your Cell.
yea, cuz you don't have to encode it to b64 and then decode it back to binary. objecturl will just be a pointer to the file to the disk and save more memory

Collectives™ on Stack Overflow

Convert Blob to image inside Cell in React

1 Answer 1

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Related