Error: unable to resolve image URL from source (undefined)
Featured topic
12 replies
Last updated: Sep 11, 2022
K
Because you’re passing
undefinedto the image URL builder, and it does not like that.
Sep 10, 2022, 7:47 AM
V
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
A
const builder = ImageUrlBuilder(client); const fileBuilder = buildFileUrl(client);
export const fileUrl = (source) => fileBuilder.file(source);
export const urlFor = (source) => builder.image(source);
export const fileUrl = (source) => fileBuilder.file(source);
export const urlFor = (source) => builder.image(source);
Sep 10, 2022, 10:39 PM
A
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={
</div>
);
}
export default App;
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
A
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
A
very tired
Sep 10, 2022, 10:43 PM
There is no file builder function. Have you defined
buildFileUrlyourself or are you expecting it to be there (it won’t)?
Sep 10, 2022, 10:50 PM
A
so i was trying to do it the same way of image url function
Sep 10, 2022, 11:12 PM
A
so any solution for me or video explaination
Sep 10, 2022, 11:13 PM
A
my array []
Sep 10, 2022, 11:17 PM
A
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
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
K
Alright, let’s clarify a few things.
Because your document has a
(Therefore, your field (
To do get the actual URL, you need to update your query.
Now, your response will yield an array of books, and every book object will have a
From there, you can pass that URL to a
Because your document has a
filetype, 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 }
pdfUrlproperty 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
S
👆
user F
is absolutely on point 💃 and target_blankis 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
?doto 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.