时间戳

首页 > 解决方案 > 如何将 JSON 字符串中的图像渲染到我的反应应用程序中？

json - 如何将 JSON 字符串中的图像渲染到我的反应应用程序中？

问题描述

这是我的 JSON 字符串：

{"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"
        }
    }
 }
}

以下是我的反应组件：

let theObject;

class Blog extends Component{

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



}

这是我在做 JSON.parse

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

这是我的渲染部分。目前我只是调用 theObject.blocks[i].text 工作正常，但我不知道如何渲染图像。总之我应该怎么称呼它？

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;

标签： jsonreactjs

解决方案

似乎您需要遍历这些entityMap 值并将data.src它们中的每一个用于图像源。
这些方面的东西： 

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

推荐阅读