Convert blob string to image in React

Question

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

Ayushya · Accepted Answer · 2020-06-03 20:10:59Z

1

You should use URL.createObjectURL

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

answered Jun 3, 2020 at 20:10

Ayushya

1,9451 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Convert blob string to image in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related