Image is not rendering. Does anybody faced this problem?

[dipeshhkc]

"entityMap":{"0":{"type":"IMAGE","mutability":"MUTABLE","data":{"src":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWO_UAe27eAhTik2ggPbzKGQfuXD1oVosA_Q&usqp=CAU","height":"auto","width":"auto","alignment":"right"}}}

[dominykast]

did you solved this problem?

[CornerSkyless]

Here is my state.

{
  "blocks": [
    {
      "key": "c407s",
      "text": " ",
      "type": "atomic",
      "depth": 0,
      "inlineStyleRanges": [],
      "entityRanges": [{ "offset": 0, "length": 1, "key": 0 }],
      "data": {}
    }
  ],
  "entityMap": {
    "0": {
      "type": "IMAGE",
      "mutability": "IMMUTABLE",
      "data": {
        "url": "https://shanghai.aliyuncs.com/images/41600b6b-37be-4229-8adb-da4bfa4c6b7e.jpg",
        "name": "1668482961564_5",
        "type": "IMAGE",
        "meta": {
          "id": "images/41600b6b-37be-4229-8adb-da4bfa4c6b7e.jpg",
          "title": "c96fd0302923c17f7dcf2b8f859fdc50.jpg",
          "alt": "c96fd0302923c17f7dcf2b8f859fdc50.jpg",
          "loop": false,
          "autoPlay": false,
          "controls": false,
          "poster": ""
        }
      }
    }
  }
}

It works after I add a atomicHandler like this:

const atomicHandler = (item: any, entityMap: any): any => {
    for (let entityItem of item.entityRanges) {
      if (entityMap.hasOwnProperty(entityItem.key)) {
        const entity = entityMap[entityItem.key];
        console.log(entity);
        if (entity.type === 'IMAGE') {
          return (
            <Image
              source={{uri: entity.data.url}}
              width={100}
            />
          );
        }
      }
    }
    return null;
 };

getRNDraftJSBlocks({
            contentState: state,
            atomicHandler,
 }),