Rich text from Contentful displaying as [object Object]

Hi all, I have a “blog posts” content model in contentful that has a text field (for the title), an image field and a rich text field for the actual content. When using the contentful fetcher the text and image fields load just fine. But when I select the rich text field (called “body”, see image below) it returns a value of [object Object] for every paragraph in the “body” field (you can see its children 0, 1, 2, 3, etc. each number contains a paragraph and I can only load individual paragraphs from this field and not all of them at once)

This is how granular I have to go to get to each individual paragraph. It’s really broken down into each individual paragraph or element inside the rich text field, and I can’t get it to just show me the whole content. Any solutions?

Hi @primitive_warbler, when you insert Contentful from the component store, it should already insert a ContentfulField component. This should be capable of displaying rich text fields as-is (it uses the @contentful/rich-text-html-renderer package - see source). Would that work for you?

Hi @yang That’s what I used but instead of displaying the rich text field as-is the output was what you see in the first image. I just created a new project and repeated the same steps whilst recording my screen so I can show you what happens, but this time it worked! Must’ve been a temporary glitch. Thanks for the quick reply :slightly_smiling_face:

Hey @primitive_warbler! To render the rich text, you should select the body field. In this example, you’re selecting the content.

Sorry about the UX! :pensive: We’re going to improve that

Hey I have problem with image.
I was use ‘Data picker’ but that is not display. and then I custom to ‘‘https:’+ $ctx.currentContentfulProductItem.fields.image[0].fields.file.url+ ‘?fit=thumb&f=top_left&h=200&w=200&r=180’’ But that still not work.
What’s my wrong here? is it not work with contentType: ‘image/webp’.
Thank you.

Hey @miniature_guppy! Can you try inserting an image and set the url as dynamic value?

I had do it done with *[slug.current == '${$ctx.params.slug}']{ title, thumbnail, price,description, agent, _updatedAt, agent, images, images[]{asset->{url}}} That’s easy.
But that’s not Image optimization.

We cannot optimize images that are coming from somewhere else (like Contentful) - Contentful usually provides its own image optimization

thanks you. So I think I need to go code components.