documentToReactComponents doesn't include images embedded in rich text fields
See original GitHub issueI am using React and Contentful with Gatsby.
I have defined a rich text field in Contentful. When adding content, I embedded an asset (image) inside the field.
I looks like this
When I query the data, I get the image inside the json
response like this
file": {
"en-US": {
"url": "//images.ctfassets.net/ijv74p5w2k9k/4K8hxN40bRHqnq4iD2OLrw/6392cc793c3bc6ec7c/my-image.jpg",
"details": {
"size": 269327,
"image": {
"width": 1747,
"height": 1240
}
},
"fileName": "my-image.jpg",
"contentType": "image/jpeg"
In my project, I fetched the entire json and rendered it like this
import {documentToReactComponents} from "@contentful/rich-text-react-renderer";
<div className={styles.content}>
{documentToReactComponents(article.content.json)}
</div>
The result is that the text is correctly displayed, but the embedded asset is not displayed.
I am not sure if I’m doing something wrong, not doing something at all or if this is just a bug.
Any suggestions?
Issue Analytics
- State:
- Created 3 years ago
- Comments:7
Top Results From Across the Web
Rendering linked assets and entries in the Rich Text field
Let's return to the example Rich Text field with two embedded links — a code block entry and a video embed entry —...
Read more >Contentful: documentToHtmlString doesn't include embedded ...
I have the following rich text document
Read more >No embedded images with rich text but would like to use ...
I'm building a Gatsby site and am using the gatsby-source-contentful plugin as well as the @contentful/rich-text-react-renderer package to ...
Read more >Render Contentful rich text in Gatsby - Egghead.io
Rich text is a new JSON format for handling complex content structures in a strongly typed manner. It is represented by the rich...
Read more >Using documentToReactComponents with options
Then, pass in the rich text file field you fetched from ... In my situation, I don't see any images despite I embedded...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@Erythros try this it worked for me. You apparently need to define how the method handles the
BLOCKS.EMBEDDED_ASSET
. Good luck@talentedunicorn thank you! That worked for me