Troubleshooting image rendering in a React component using PortableText and Sanity.io.

The image in my block text is not rendering only text render on the page

Please use a single message for your problem so we can support you in a single Slack thread.

What have you tried? How does your code look like? We can’t help with that little amount of data.

import React from 'react';

import { MainConatainer } from '../../styledComponents/basicui';

import { client,urlFor } from '../../client/client';

import {PortableText} from '@portabletext/react';

import Moment from 'react-moment';

import { Seo } from '../../components';

const CaseDetails = ({data}) => {

console.log(data)

const serializers = {

types: {

image: ({ node }) => {

return (

<div className="blog-image" style={{ margin: "2rem 0" }}>

<img

style={{

width: "100%",

objectFit: "cover",

borderRadius: "20px",

}}

src={urlFor(node).url()}

alt={node.caption}

onDragStart={(e) => {

e.preventDefault();

}}

/>

<p

style={{

textaAlign: "left",

fontStyle: "italic",

color: "#7e7e7e",

fontWeight: "400",

}}

>

{node.caption}

</p>

</div>

);

},

},

};

// console.log("The router is ", router.query.slug)

return (

<MainConatainer>

<Seo title={data[0].title} description={data[0].description} />

<div className="blog-single gray-bg">

<div className="container">

<div className="row align-items-start">

<div className="col-lg-8 m-15px-tb">

<article className="article">

<div className="article-img">

<img src={data[0].mainImage.asset.url} width="100%" alt={data[0].title} />

</div>

<div className="article-title">

{data[0].categories.map((item, index) => (

<h6 key={index}><a href="#">{item.title}</a></h6>

))}

<h2 className='text-danger'>{data[0].title}</h2>

<div className="media">

<div className="media-body">

<label>Answered By : <span className='text-dark'>{data[0].author.name}</span></label>

<span>Answered On :<Moment format="MMMM D[, ] YYYY">{data[0]._createdAt}</Moment> and Last updated on <Moment format="MMMM D[, ] YYYY">{data[0]._updatedAt}</Moment></span>

</div>

</div>

</div>

<div className="article-content">

<PortableText value={data[0].body} serializers={serializers} />

</div>

</article>

<div className="contact-form article-comment">

<h4>Leave a Reply</h4>

<form id="contact-form" method="POST">

<div className="row">

<div className="col-md-6">

<div className="form-group">

<input name="Name" id="name" placeholder="Name *" className="form-control" type="text" />

</div>

</div>

<div className="col-md-6">

<div className="form-group">

<input name="Email" id="email" placeholder="Email *" className="form-control" type="email" />

</div>

</div>

<div className="col-md-12">

<div className="form-group">

<textarea name="message" id="message" placeholder="Your message *" rows="4" className="form-control"></textarea>

</div>

</div>

<div className="col-md-12">

<div className="send">

<button className="px-btn theme" disabled><span>Submit</span> <i className="arrow"></i></button>

</div>

</div>

</div>

</form>

</div>

</div>

{/* <div className="col-lg-4 m-15px-tb blog-aside">

<div className="widget widget-author">

<div className="widget-title">

<h3>Refrenced Links</h3>

{data[0].answerRefrences.split(",").map((item,index)=>(

<div key={index}><a href={item}>{item}</a></div>

))}

</div>

<div className="widget-body">

</div>

</div>

<div className="widget widget-post">

<div className="widget-title">

<h3>Media</h3>

</div>

<div className="widget-body">

{data[0].videoURL && data[0].videoURL.split(',').map((item,index)=>(

<div className="media" key={index}>

<video width="100%" controls>

<source src={item} type="video/mp4" />

</video>

</div>

))}

</div>

</div>

</div> */}

</div>

</div>

</div>

</MainConatainer>

)

}

export default CaseDetails

export const getServerSideProps = async (context) => {

// const router = useRouter();

//   console.log("The context value i am getting is",)

`const data = await client.fetch(

*[_type == "cases" && slug.current == "${context.query.slug}"]{

title,

slug,

mainImage{

asset->{

url

}

},

categories[]->{

title

},

author->{

name,

},

body,

caseRefrence,

_createdAt,

_updatedAt,

}

);`

return {

props: {

data

}

}

}

i thought thats a common problem i will just a link for that

import {PortableText} from '@portabletext/react'; this is renderening the text but not renderign the image

Why are you reading a

node

key in the image renderer? I’m pretty sure an image block doesn’t have such key and holds the data in a

value

object.

In any case, I would start by logging what you actually receive in the image component. I think you’re just reading the wrong object.

here what i get in console actually i am new on sanity there a developer he use this to render image he used next-sanity library but that library remove those function ... see body i have image refrence there

Can you please change this line:
To this:

not working

the code at console.log not even executed

Okay, that’s interesting. Let me have another look at your code quickly.

Oh. The prop should be called

components

, not

serializers

.

yes now i got this console.log i think now the issue was that i need to give prop as comonent not serielizer in my orignal codeblock

what should i do now

Right, so you can pass

value.asset

to the

urlFor()

function. 🙂

the value is not defined

will come form where i will get the value

You just showed me your console.log and it clearly contains a

value

property.

props.value.asset

.

working thanks

love you man

Don’t call me man. 😄

I’m glad we made it work though.

Kudos!