Trouble uploading images with sanity.io, resolved with alternate method
24 replies
Last updated: Aug 8, 2022
A
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
K
We’re going to need to see some code. 🙂
Aug 5, 2022, 9:50 AM
A
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
A
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
A
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
A
otherwise I will share sanity.js where I have imported @sanity/client and @sanity/image-url
Aug 5, 2022, 11:25 AM
K
Can you show me the error?
Aug 5, 2022, 12:06 PM
A
This is the error I get
Aug 5, 2022, 1:25 PM
A
This is how looks the image section in my sanity schema
Aug 5, 2022, 1:35 PM
A
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
S
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
A
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 dataAug 8, 2022, 8:21 AM
S
Have you tried what I suggested before?
In addition you can also try to use
and then use it in your
In addition you can also try to use
urlForoutside of your return function:
const image= urlFor(imgUrl).width(400).height(300).url()
<Image/>component.
Aug 8, 2022, 2:03 PM
A
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
A
Or better, are this the right keys value to use with image/builder?
Aug 8, 2022, 2:14 PM
S
yes they are!
Aug 8, 2022, 2:21 PM
S
const image= urlFor(imgUrl).width(400).height(300).url()
Aug 8, 2022, 2:21 PM
A
I have tried it and it gives me the same error unfortunately
Aug 8, 2022, 2:30 PM
A
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.urlAug 8, 2022, 3:39 PM
A
And it worked.
Aug 8, 2022, 3:40 PM
A
I still need to figure out how image/builder works
Aug 8, 2022, 3:40 PM
A
😀😀
Aug 8, 2022, 3:40 PM
S
you got it to work?
Aug 8, 2022, 4:41 PM
A
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 -> {_id, url}}. So then as source of the Image component I have used the source=imgUrl.asset.url and it workedAug 8, 2022, 4:47 PM
A
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.