How to render image from JSON string into my react application?

Question

This is my JSON string:

{"blocks": 
[{
   "key":"mm3r",
   "text":"",
   "type":"unstyled",
   "depth":0,
   "inlineStyleRanges":[],
   "entityRanges":[],
   "data":{}}],
   "entityMap":
    {
      "0":
       {
         "type":"IMAGE",
         "mutability":"MUTABLE",
         "data":{"src":"https://t00.deviantart.net/1vvQLZ9mzHkH16x62-aLZmIlY1I=/fit-in/300x900/filters:no_upscale():origin()/pre00/e334/th/pre/f/2014/270/7/e/protect__luffy_x_suicidal_reader__by_wulferious-d80s516.png",
         "height":"auto",
         "width":"auto"
        }
    }
 }
}

Following is my react component:

let theObject;

class Blog extends Component{

constructor(props){
    super(props);
    this.blogContent = props.blogContent;
    this.blogId = props.blogId;



}

This is where I'm doing JSON.parse

componentWillMount(){
    theObject = JSON.parse( this.blogContent );
    console.log(this.blogContent);
}

Here is my render part. Presently I'm just calling theObject.blocks[i].text which works fine but I don't know how to render the image. In short how should I call it??

render(props) {
    return(
        <div className = "blog header">
        {
            Array.from(Array(theObject.blocks.length), (e, i) => {
                return <p key={i}>{theObject.blocks[i].text }</p>
            })}

        </div>
          );
        }
}

Blog.proptypes = {
    blogContent: Proptypes.string
}

export default Blog;

seems like you would need to iterate over the entityMap keys and use the data.src for each of them <img src={data.src} /> — Sagiv b.g
– Sagiv b.g, Commented May 26, 2018 at 12:44

Sagiv b.g · Accepted Answer · 2018-05-26 13:23:57Z

1

Seems like you would need to iterate over the entityMap values and use the data.src for each of them for the image source.
Something along these lines:

Object.values(theObject.blocks[i].entityMap).map(val => <img src={val.data.src} />)

answered May 26, 2018 at 13:23

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

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

Collectives™ on Stack Overflow

How to render image from JSON string into my react application?

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