How to Fetch Image From Client - Blank Image in Response

Hey guys how to fetch image from client. I am fetching image but it returns blank image

{

name: 'image',

title: 'Image',

type: 'array',

of: [{ type: 'image' }],

options: {

hotspot: true,

}

},

This is the schema

Images exist as references to an image asset in Sanity, so you need to expand the reference in order to get the url. There's a good introduction to presenting images here .

I used the url builder. What now? how to get image src

What does your code look like?

import React, { useEffect, useState, useLayoutEffect } from 'react';

import { Link } from "react-router-dom";

import Header from "../components/Header";

import "./Home.css";

import {Carousel, Card, Image} from 'antd';

import {client} from "../lib/client";

const Home = () => {

const [products,setProducts]= useState([]);

const [bannerData,setBannerData]= useState([])

useEffect(() => {

`client.fetch(

*[_type == "featured"]{

name,

genre,

image

}

).then((data)=>setProducts(data))`

}, [])

useLayoutEffect(() => {

`client.fetch(

*[_type == "banner"]{

image

}

).then((data)=>setBannerData(data))`

}, [])

return(

<>

<div className="container">

<Header/>

<Carousel autoplay className="carousel">

{bannerData?.map((data) => {

return <img src={urlFor(data.image).url()} className="carousel-img" alt="carousel"></img>;

})}

</Carousel>

<div className="cards">

{products.map((product)=>{

return(

<Card className="card" key={product._id}>

<Link to="/categories" state={product.genre} className="link" style={{textDecoration:"none"}}>

<img src={urlFor(product.image).url()} alt={product.name} className="card-content"/>

<h4>{product.name}</h4>

</Link>

</Card>

)

})}

</div>

</div>

</>

)

}

export default Home;

I have url builder function in client

but how to use it here

import sanityClient from '@sanity/client';

import imageUrlBuilder from '@sanity/image-url'

export const client = sanityClient({

projectId:'uykjgyz0',

dataset:'production',

apiVersion:'2022-03-10',

useCdn:true,

token:process.env.SANITY_TOKEN

});

const builder= imageUrlBuilder(client)

export function urlFor(source) {

return builder.image(source)

}

Client.js

Please help anyone

You'll need to import your

urlFor

function wherever you want to use it, then pass your image asset to the function. It looks like you're doing that with your product image but not your banner data.

I am doing that in bannerData too and it says Uncaught (in promise) Error: Unable to resolve image URL from source ([{"_key":"c86fb91a8ad3","_type":"image","asset":{"_ref":"image-48f1b8fa7db78f55843dcd58547080123dc36adb-192x293-webp","_type":"reference"}}])

Can you try passing in the asset instead of the entire image?

What does it mean to pass the asset?image.asset?

Yes

Now it says Uncaught (in promise) Error: Unable to resolve image URL from source (undefined) at urlForImage (urlForImage.ts
:43:1) at ImageUrlBuilder.url (builder.ts
:229:1) at Home.js
:42:1 at Array.map (<anonymous>)
at Home (Home.js
:37:1) at renderWithHooks (react-dom.development.js
:14985:1) at updateFunctionComponent (react-dom.development.js
:17356:1) at beginWork (react-dom.development.js
:19063:1) at HTMLUnknownElement.callCallback (react-dom.development.js
:3945:1) at Object.invokeGuardedCallbackDev (react-dom.development.js
:3994:1)

Strangely the docs says passing the image is enough

Now you can use this handy builder-syntax to create your URLs:

This is what documentation says

Still doesn't work