👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

Error: unable to resolve image URL from source (undefined)

12 replies
Last updated: Sep 11, 2022
Because you’re passing
undefined
to the image URL builder, and it does not like that.
Sep 10, 2022, 7:47 AM
Are you passing it an address or the image field itself? If memory serves people tend to send it dereferenced addresses instead of the original full asset object stored with the field. It uses that more complete data to arrive at all the different transformed URLs.
Sep 10, 2022, 12:50 PM
const builder = ImageUrlBuilder(client); const fileBuilder = buildFileUrl(client);

export const fileUrl = (source) => fileBuilder.file(source);
export const urlFor = (source) => builder.image(source);
Sep 10, 2022, 10:39 PM
import React from "react";import { useEffect } from "react";
import { useState } from "react";
import moment from "moment";
import { client, fileUrl, urlFor } from "./sanityClient";

function App() {
const [books, setBooks] = useState([]);
console.log(books);
useEffect(() => {
const query = '*[_type == "primaryBooks"]';
client.fetch(query).then((data) => {
setBooks(data);
});
}, []);

return (
<div>
<h1>Hello Apear</h1>
{books.map((book) => (
<a href={
/read/${fileUrl(book.pdf_url)}
}>read</a> ))}
</div>
);
}

export default App;
Sep 10, 2022, 10:42 PM
or if someone can explain to me how to fetch file from sanity by maping through or any video related to it send me please
Sep 10, 2022, 10:43 PM
very tired
Sep 10, 2022, 10:43 PM
There is no file builder function. Have you defined
buildFileUrl
yourself or are you expecting it to be there (it won’t)?
Sep 10, 2022, 10:50 PM
so i was trying to do it the same way of image url function
Sep 10, 2022, 11:12 PM
so any solution for me or video explaination
Sep 10, 2022, 11:13 PM
my array []
Sep 10, 2022, 11:17 PM
1. 02. :
3.
author4. :
a. "Openstax"
5.
pdf_url a. :
6.
asset i. :
7.
_ref8. :
1. "file-e110eda3ffce1a778846f5ebf959ff72fb953ee5-pdf"
9.
_type10. :
1. "reference"
11. [[Prototype]]
12. :
1. Object
13.
_type14. :
i. "file"
15. [[Prototype]]
16. :
i. Object
17.
title18. :
a. "College Physics"
19.
_createdAt20. :
a. "2022-09-09T22
:26:00Z"21.
_id22. :
a. "42f69f46-37c7-456c-8126-c45c84548f26"
23.
_rev24. :
a. "IE8tlwnnGIwBkp6cNnXiN6"
25.
_type26. :
a. "primaryBooks"
27.
_updatedAt28. :
a. "2022-09-09T22
:37:58Z"29. [[Prototype]]
30. :
a. Object

Sep 10, 2022, 11:17 PM
Alright, let’s clarify a few things.
Because your document has a
file
type, you can attach a file such as a PDF file. The way it works is that the file itself is uploaded to Sanity, and your document contains a reference to that asset. You then need to resolve that reference to retrieve the actual URL to the PDF file.
(Therefore, your field (
pdf_url
) probably has a misleading name. It’s not a “PDF URL” that you get on that document. It’s a reference to an asset object which points to a PDF file. But that’s just naming so it doesn’t matter too much.)
To do get the actual URL, you need to update your query.

*[_type == "primaryBooks"] {
  ...,
  "pdfUrl": pdf_url.asset->url
}
Now, your response will yield an array of books, and every book object will have a
pdfUrl
property which is mapped to a URL to the Sanity asset CDN (provided the book has an attached PDF file).
From there, you can pass that URL to a
<a>
element so that it opens it in the current tab. You can add
target="_blank"
to your link so it opens it in a new tab for instance.
Sep 11, 2022, 8:34 AM
👆
user F
is absolutely on point 💃 and
target_blank
is always a good choice ... Just btw (because I think it's cool): If you want the pdfs to be downloaded by clicking the link you can also add a simple
?do
to the URL at the end 😊
Sep 11, 2022, 10:58 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?