Section images will not display when pulling from sanity io data base - reactjs

Question

Currently building my portfolio site using Next.js and Sanity for my CMS. I've managed to pull the featured image for a project using the useEffect and setImageUrl method. I'm trying to pull images to display on the front end for different sections on the project details page. These are images I uploaded to my database through sanity. I end up getting the broken image icon instead of the actual image. I'm pretty stumped on why it's not pulling the image data correctly. Here is the code for the project single page (as a slug).
import imageUrlBuilder from '#sanity/image-url'
import { useState, useEffect } from 'react';
import BlockContent from '#sanity/block-content-to-react'
export const Post = ({ title, image, problem, solution, role, body, body2, body3, body4, body5, photo }) => {
const [imageURL, setImageUrl] = useState('');
useEffect(() => {
const imgBuilder = imageUrlBuilder({
projectId: 'hidden',
dataset: 'production',
});
setImageUrl(imgBuilder.image(image));
}, [image]);
return (
<div>
<div className="container mx-auto mt-8 mb-20 px-6">
{imageURL && <img className="my-8" src={imageURL} />}
<h1 className="text-5xl font-bold my-8">{title}</h1>
<div className="flex justify-between space-x-12 mb-8">
<div className="flex flex-col">
<h3 className="text-lg font-semibold">The Problem</h3>
<div className="w-auto my-2">
<BlockContent blocks={problem} />
</div>
</div>
<div className="flex flex-col">
<h3 className="text-lg font-semibold">The Solution</h3>
<div className="w-auto my-2">
<BlockContent blocks={solution} />
</div>
</div>
<div className="flex flex-col">
<h3 className="text-lg font-semibold">Role</h3>
<div className="w-auto my-2">
<BlockContent blocks={role} />
</div>
</div>
</div>
<img src={photo} />
<div className="w-auto">
<BlockContent blocks={body} />
</div>
<div className="w-auto">
<BlockContent blocks={body2} />
</div>
<div className="w-auto">
<BlockContent blocks={body3} />
</div>
<div className="w-auto">
<BlockContent blocks={body4} />
</div>
<div className="w-auto">
<BlockContent blocks={body5} />
</div>
</div>
)
};
export const getServerSideProps = async pageContext => {
const pageSlug = pageContext.query.slug;
if (!pageSlug) {
return {
notfound: true
}
}
const query = encodeURIComponent(`*[ _type == "project" && slug.current == "${pageSlug}"]`) ;
const url = `https://hidden?query=${query}`;
const result = await fetch(url).then(res=> res.json());
const post = result.result[0];
if(!post) {
return{
notfound: true
}
} else {
return {
props: {
title: post.projectTitle,
image: post.projectImage,
problem: post.problem,
solution: post.solution,
role: post.role,
body: post.sectionOne,
body2: post.sectionTwo,
body3: post.sectionThree,
body4: post.sectionFour,
body5: post.sectionFive,
photo: post.Image01
}
}
}
};
export default Post;

Answer 1

instead of using a deconstructor for your imageUrl, try with the following syntax:
import sanityClient from "../../lib/client";
import imageUrlBuilder from "#sanity/image-url";
const builder = imageUrlBuilder(sanityClient);
function urlFor(source) {
return builder.image(source);
}
{item.image && (<img src={urlFor(item.image).width(220).url()} alt={item.title} />)}
where sanityClient.js in React:
https://www.sanity.io/guides/create-a-single-page-application-with-react-and-sanity
and in Next.js:
https://www.sanity.io/guides/sanity-nextjs-tailwindcss