内容丰富：documentToHtmlString 不包含富文本中的嵌入图像

Question

我有以下富文本文档

{  
   "data":{},
   "content":[  
      {  
         "data":{},
         "content":[  
            {  
               "data":{},
               "marks":[ ],
               "value":"test",
               "nodeType":"text"
            }, {  
               "data":{},
               "marks":[],
               "value":"",
               "nodeType":"text"
            }
         ],
         "nodeType":"paragraph"
      },
      {  
         "data":{  
            "target":{  
               "sys":{  
                  "space":{  
                     "sys":{  
                        "type":"Link",
                        "linkType":"Space",
                        "id":"gedg1u5b0yz9"
                     }
                  },
                  "id":"2CzKe2pWvewCiek6w0yyoQ",
                  "type":"Asset",
                  "createdAt":"2019-01-07T22:37:55.473Z",
                  "updatedAt":"2019-01-07T22:37:55.473Z",
                  "environment":{  
                     "sys":{  
                        "id":"master",
                        "type":"Link",
                        "linkType":"Environment"
                     }
                  },
                  "revision":1,
                  "locale":"en-US"
               },
               "fields":{  
                  "title":"Test Image",
                  "description":"Image for testing",
                  "file":{  
                     "url":"//images.ctfassets.net/<hidden>/<hidden>/<hidden>/IMG_2878.JPG",
                     "details":{  
                        "size":3874595,
                        "image":{  
                           "width":5184,
                           "height":3456
                        }
                     },
                     "fileName":"IMG_2878.JPG",
                     "contentType":"image/jpeg"
                  }
               }
            }
         },
         "content":[],
         "nodeType":"embedded-asset-block"
      },
      {  
         "data":{},
         "content":[  
            {  
               "data":{},
               "marks":[],
               "value":"",
               "nodeType":"text"
            }
         ],
         "nodeType":"paragraph"
      }
   ],
   "nodeType":"document"
}

当我使用 documentToHtmlString （从这里https://www.npmjs.com/package/@contentful/rich-text-html-renderer）

documentToHtmlString(document);

它输出以下内容

<p>test</p><p></p>

任何人都知道如何让它输出 img 标签？

Answer 1

从 https://github.com/contentful/rich-text/issues/58#issuecomment-452236848

您需要指定如何呈现您可以在此处找到有关它的更多信息https://github.com/contentful/rich-text/tree/master/packages/rich-text-html-renderer#usage

const options = {
  renderNode: {
    [BLOCKS.EMBEDDED_ENTRY]: (node) => `<custom-component>${customComponentRenderer(node)}</custom-component>`
  }
}

documentToHtmlString(document, options);

我的具体决议是：

const options = {
    renderNode: {
        [BLOCKS.EMBEDDED_ASSET]: ({ data: { target: { fields }}}) =>
            `<img src="${fields.file.url}" height="${fields.file.details.image.height}" width="${fields.file.details.image.width}" alt="${fields.description}"/>`,
    },
};