Go Behind the Experience to see how Tecovas brings the West to life with Sanity 🤠 July 18th

How do I render the image in Sanity blockcontent into a custom image component?

4 replies
Last updated: Nov 28, 2020
How is it that i render the image in the blockcontent into a custom image component? like in a blogpost where I want to display images in the body section that are uploaded in the body which has block content type… this link (https://github.com/sanity-io/block-content-to-react ) didn't help me, as specifying imageOptions in BlockContent displays images very plainly, i couldn't control the width based on screen sizes and image zoom feature that I could implement if I could use a custom image component
Nov 26, 2020, 2:23 AM
Specify an image serializer.
const serializer = {
  types: {
    image: props => <img ... />
Nov 26, 2020, 6:05 PM
I tried that too. But the problem i faced was I couldn’t get to pass the image data in the image tag. For example the only image src that might be helpful is in props.data.asset but that too only has _ref property, which isn’t a link to the image from sanity’s CDN. Do you have any idea where I could get the asset.fluid / asset.fixed data (say if wanted to render it inside gatasby image tag)
Nov 27, 2020, 11:33 AM
Pass the
, (and
, and
properties, if present) to SanityImage , like this:
<SanityImage {...props} width={600} alt="" />
Nov 27, 2020, 2:32 PM
thanks a lot. A quick mention, it was
that made it work for me.
Nov 28, 2020, 3:46 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?