Contentful: documentToHtmlString doesn't include embedded image in rich text

Question

I have the following rich text document

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

When I use documentToHtmlString (from here https://www.npmjs.com/package/@contentful/rich-text-html-renderer )

documentToHtmlString(document);

It outputs the following

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

Anyone know how to get it to output the img tag as well?

Answer 1

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

You need to specify how to render that You can find more about it here 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);

My specific resolution was:

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}"/>`,
    },
};

Answer 2

This is the original answer and hardcoded dynamic values, I hope it can help the reader to have an immediate answer to the specific problem:

let options = {
  renderNode: {
    'embedded-asset-block': (node) =>
      `<img class="img-fluid" src="${node.data.target.fields.file.url}"/>`
  }
}
let bodyHTML = body ? documentToHtmlString(body, options) : ''

Answer 3

const options = {
    renderNode: {
        [BLOCKS.EMBEDDED_ASSET]: ({ data: { target: { fields }}}) =>
        <div dangerouslySetInnerHTML={{__html: `<img src="${fields.file['en-GB'].url}" alt="${fields.title['en-GB']}"/>`}} />,
    },
};

I found i needed to set dangerouslySetInnerHTML for it to render properly in the browser.