Discussion on resolving an error with image URLs in a Next.js app using @sanity/image-url library.
32 replies
Last updated: Aug 24, 2022
I
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"}}])
Unable to resolve image URL from source
Error: Unable to resolve image URL from source ([{"_key""image","asset""image-85fd403b1036fb99e0d0523eac35798f28d51dc5-828x1472-jpg","_type":"reference"}}])
Aug 24, 2022, 10:02 AM
I
{ "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"
}
}
"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"
}
}
Aug 24, 2022, 1:06 PM
I
Aug 24, 2022, 1:07 PM
I
Aug 24, 2022, 1:09 PM
I
Aug 24, 2022, 1:11 PM
I
Aug 24, 2022, 1:19 PM
I
Aug 24, 2022, 1:46 PM
It looks like you're passing an entire block, not just the image asset. Can you try doing
product.image.asset?
Aug 24, 2022, 3:22 PM
I
Aug 24, 2022, 3:25 PM
I
Aug 24, 2022, 3:27 PM
I
For some reason it seems to me that this is a problem of the updated react/next
Aug 24, 2022, 3:28 PM
Can you use optional chaining? It likely isn't defined yet if it's relying on an external call.
Aug 24, 2022, 3:31 PM
I
Aug 24, 2022, 3:35 PM
I
Aug 24, 2022, 3:36 PM
I
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
Aug 24, 2022, 3:37 PM
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.
Aug 24, 2022, 3:41 PM
You'll need to map through that array as well.
Aug 24, 2022, 3:41 PM
I
but I have 1 image and in tutorial it is working, lol
Aug 24, 2022, 3:44 PM
I
how can I loop?
Aug 24, 2022, 3:44 PM
You can map through an array.
Aug 24, 2022, 3:45 PM
I
I know, but how to do it with those images? I just don't get it. I'm trying, but nothing happens
Aug 24, 2022, 3:53 PM
product.image.map()will iterate through your array of images. Then you'll need to return an image component for each image.
Aug 24, 2022, 4:08 PM
I
https://i.imgur.com/E9GvImf.png Nothing happens
Aug 24, 2022, 4:13 PM
I
I've even tried [0] before
Aug 24, 2022, 4:13 PM
I'd suggest rereading carefully through your code. You're not returning anything from your image map. This reproduction works for me:
{products?.map(product => (
<div key={product._id}>
<h1>{product?.title}</h1>
{product?.image?.map(image => (
<img src={urlFor(image).url()} />
))}
</div>
))}Aug 24, 2022, 4:56 PM
I
Oh, yeah. Thanks!
Aug 24, 2022, 5:08 PM
You are welcome! It's always a little thing like that.
Aug 24, 2022, 5:09 PM
I
https://i.imgur.com/b26F2Vf.png
I've just uploaded 1 more picture and I'm getting 2 arrays instead of 1.
I've just uploaded 1 more picture and I'm getting 2 arrays instead of 1.
Aug 24, 2022, 5:11 PM
I
even without that closure
Aug 24, 2022, 5:12 PM
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.
Aug 24, 2022, 5:13 PM
I
omg, you are right
Aug 24, 2022, 5:16 PM
I
thank you so much!!
Aug 24, 2022, 5:16 PM
You're very welcome 🙂
Aug 24, 2022, 5:23 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.