CODEWITHSUNDEEP
javascriptreactjsimageblob
Leo Messi
Leo Messi

Reputation: 6196

Convert blob string to image in React

There is an object which contains as a field an image saved as string.

It looks like this

myObj = {
  ...
  image: blob:http://localhost:3000/304dbb9b-6465-4dc8-8b2c-5a25fae7e452
};

how can this be converted and shown as image?

I need to save it in this form:

const row = [
      { label: 'NAME', value: `${myObj.name}` },
      { label: 'IMAGE', value: `${myObj.image}` },
    ];

which is mapped and some cells are populated with the data:

<table>  
  <tbody>
    <tr>
      {row.map(item => (
        <Cell
          key={row.indexOf(item)}
          label={item.label}
          value={item.value}
        />
      ))}
    </tr>    
</table>

How I tried: on the line

{ label: 'IMAGE', value: `${myObj.image}` },

if it is let like that it will print on the screen the string value.

I tried also instead of value: ``${myObj.image} to put value: <img alt="" src={myObj.image} /> but in this case nothing is shown

Upvotes: 2

Views: 1739

Answers (1)

Ayushya
Ayushya

Reputation: 1920

You should use URL.createObjectURL

<img src={URL.createObjectURL(myObj.image)} alt=""/>

Upvotes: 1

Related Questions