✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

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
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"}}])
Aug 24, 2022, 10:02 AM
{ "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"
}
}
Aug 24, 2022, 1:06 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
Aug 24, 2022, 3:27 PM
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
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
but I have 1 image and in tutorial it is working, lol
Aug 24, 2022, 3:44 PM
how can I loop?
Aug 24, 2022, 3:44 PM
You can map through an array.
Aug 24, 2022, 3:45 PM
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
Aug 24, 2022, 4:13 PM
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
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
https://i.imgur.com/b26F2Vf.png
I've just uploaded 1 more picture and I'm getting 2 arrays instead of 1.
Aug 24, 2022, 5:11 PM
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
omg, you are right
Aug 24, 2022, 5:16 PM
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.

Was this answer helpful?