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

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

Specify an image serializer.

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)

Pass the

asset

, (and

hotspot

, and

crop

properties, if present) to SanityImage , like this:

<SanityImage {...props} width={600} alt="" />

thanks a lot. A quick mention, it was

{...props.node}

that made it work for me.