Unlock seamless workflows and faster delivery with our latest releases- get the details

Trouble uploading images with sanity.io, resolved with alternate method

24 replies
Last updated: Aug 8, 2022
Hi there, I have implemented sanity.io in my project and I am having trouble trying tpo upload images in it. Specifically, I am using the imageBuilder in order to upload them but it looks like it's not working as when I am using the urlFor function in my component, it says that the data pulled it's undefined. When I have figure it out, I have tried to check if I was pulling the data in the right way and evntually I was doing it correctly as i could get the assetId and the type.
Aug 5, 2022, 9:46 AM
We’re going to need to see some code. 🙂
Aug 5, 2022, 9:50 AM
HI
user F
, I will share my code. So briefly, the ResturantCard component is where I am using the urlFor() function. As you will see the imgUrl Prop is imported from the component FeaturedRow.js where I have imported my data from sanity using the GROQ function.
Aug 5, 2022, 11:17 AM
So I have stored sanity data in a state called restaurants and then in order to get all the key value I am mapping through resturants array stored in the state.
Aug 5, 2022, 11:21 AM
The issue is when I am trying to retrieve imgUrl in RestaurantCard.js using the sanity imageBuilder as it gives me an error saying that url is undefined
Aug 5, 2022, 11:23 AM
otherwise I will share sanity.js where I have imported @sanity/client and @sanity/image-url
Aug 5, 2022, 11:25 AM
Can you show me the error?
Aug 5, 2022, 12:06 PM
This is the error I get
Aug 5, 2022, 1:25 PM
This is how looks the image section in my sanity schema
Aug 5, 2022, 1:35 PM
ANd this is how looks my restaurant.js in the sanity/schemas folder when I have created the data
Aug 5, 2022, 1:42 PM
could you
console.log(imgUrl)
and try this:
restaurants?.map(resto => <RestaurantCard 
  key={resto._id}
  id={resto._id}
  title={resto.name}
  //etc.
  lat={resto.lat}/>)

Aug 5, 2022, 4:32 PM
HI
user J
I have console.log the imgUrl prop and this is what I get. It seems to me that this prop has been imported correctly and I get the image data correctly. So now I need to understand why the image/builder doesn't work with this data
Aug 8, 2022, 8:21 AM
Have you tried what I suggested before?
In addition you can also try to use
urlFor
outside of your return function:
const image= urlFor(imgUrl).width(400).height(300).url()
and then use it in your
<Image/>
component.
Aug 8, 2022, 2:03 PM
Yes
user J
I have tried what you have suggested before and it works as I get the data from sanity. When I console.log the imgUrl I have got asset and type, are those key value enough to be used in the image/builder?
Aug 8, 2022, 2:13 PM
Or better, are this the right keys value to use with image/builder?
Aug 8, 2022, 2:14 PM
yes they are!
Aug 8, 2022, 2:21 PM
const image= urlFor(imgUrl).width(400).height(300).url()
Aug 8, 2022, 2:21 PM
I have tried it and it gives me the same error unfortunately
Aug 8, 2022, 2:30 PM
Hi
user J
I have figured it out. I found a way to extract the asset_id and url, and I have basically add to Image component the source imgUrl.asset.url
Aug 8, 2022, 3:39 PM
And it worked.
Aug 8, 2022, 3:40 PM
I still need to figure out how image/builder works
Aug 8, 2022, 3:40 PM
😀😀
Aug 8, 2022, 3:40 PM
you got it to work?
Aug 8, 2022, 4:41 PM
Yes
user J
I’ve used a different way. When I have fetched the data from sanity in my project, I have pulled out from image{ asset -&gt; {_id, url}}. So then as source of the Image component I have used the source=imgUrl.asset.url and it worked
Aug 8, 2022, 4:47 PM
But I still don't know how to use the image/builder
Aug 8, 2022, 4:47 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?