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?
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
import { BLOCKS } from '@contentful/rich-text-types';
import { documentToHtmlString } from '@contentful/rich-text-html-renderer';
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}"/>`,
},
};