Discussion on resolving an error with image URLs in a Next.js app using @sanity/image-url library.

Hello, how can I solve this problem?

Unable to resolve image URL from source

Error: Unable to resolve image URL from source ([{"_key""image","asset""image-85fd403b1036fb99e0d0523eac35798f28d51dc5-828x1472-jpg","_type":"reference"}}])

{ "name": "my-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@sanity/client": "^3.3.3",
"@sanity/image-url": "^1.0.1",
"next": "12.2.5",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"eslint": "8.22.0",
"eslint-config-next": "12.2.5"
}
}

It looks like you're passing an entire block, not just the image asset. Can you try doing

product.image.asset

?

without url()

https://i.imgur.com/aDWohK6.png

For some reason it seems to me that this is a problem of the updated react/next

Can you use optional chaining? It likely isn't defined yet if it's relying on an external call.

no, it's not about optional chaining, I'm sure. Its about library and React/Next. I'm not the only one with this problem

No, if you look at your data, your image field is actually an array of images, not an object. Dot notation won't work for accessing the asset.

You'll need to map through that array as well.

but I have 1 image and in tutorial it is working, lol

how can I loop?

You can map through an array.

I know, but how to do it with those images? I just don't get it. I'm trying, but nothing happens

product.image.map()

will iterate through your array of images. Then you'll need to return an image component for each image.

https://i.imgur.com/E9GvImf.png Nothing happens

I've even tried [0] before

I'd suggest rereading carefully through your code. You're not returning anything from your image map. This reproduction works for me:

Oh, yeah. Thanks!

You are welcome! It's always a little thing like that.

https://i.imgur.com/b26F2Vf.png
I've just uploaded 1 more picture and I'm getting 2 arrays instead of 1.

even without that closure

If your client has a token, you're likely also getting the draft version of the document. It looks like you haven't published the changes in the Studio.

omg, you are right

thank you so much!!

You're very welcome 🙂