How to Fetch Image From Client - Blank Image in Response
23 replies
Last updated: May 16, 2022
M
Hey guys how to fetch image from client. I am fetching image but it returns blank image
M
{ name: 'image',
title: 'Image',
type: 'array',
of: [{ type: 'image' }], options: { hotspot: true,
}
},
M
This is the schema
M
I am giving {fetchedData.image} as src of img
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 .
M
user M
I used the url builder. What now? how to get image srcWhat does your code look like?
M
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;
M
I have url builder function in client
M
but how to use it here
M
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)
}
M
Client.js
M
Please help anyone
You'll need to import your
urlForfunction 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.
M
user M
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?
M
What does it mean to pass the asset?image.asset?
Yes
M
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)
: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)
M
Strangely the docs says passing the image is enough
M
Now you can use this handy builder-syntax to create your URLs:
<img src={urlFor(person.image).width(200).invert().flipHorizontal().url()} />M
This is what documentation says
M
Now i tried this <img src={urlFor(`<https://cdn.sanity.io/images/uykjgyz0/production/${data.image.asset._ref.slice(6)}>`).url()}M
Still doesn't work
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.