Error with img tag in Sanity and React resolved after realizing typo in schema field name.

Question: I am getting an error that is caused by the img tag and cannot find anything online about a fix. Trying to resolve error “urlForImage.ts:43 Uncaught Error: Unable to resolve image URL from source (undefined)” using Sanity and React.
I am running into an error using Sanity with Javascript and React. The app is a personal portfolio site and I have successfully pulled data from Sanity for 3 other sections. Now that I am working on the Testimonials section, I am trying to pull 2 images (jpegs) that currently loaded in Sanity Studio: testimonials > imgurl In my return statement, I am checking for length of testimonials so that I only fetch if at least one is present. Inside the image tag, I am using

Code Block:


1. urlFor is the function used to fetch images off Sanity, as per their documentation.

2. currentIndex is the useState inside of the Testimonial function, which acts as the container component for this section of the website. It will keep track of the state of the image being displayed and will cycle through others with a clickable action (code not present here)



Question: I am getting an error that is caused by the img tag and cannot find anything online about a fix.

**ERROR MESSAGE**:
react-dom.development.js:20085 The above error occurred in the <img> component:
at img
at div
at Testimonial (
http://localhost:3000/main.20b2c7aaa42080546b80.hot-update.js:37:90 ) at div
at VisualElementHandler (
http://localhost:3000/static/js/bundle.js:119980:38 ) at MotionComponent (
http://localhost:3000/static/js/bundle.js:119880:20 ) at HOC
at div
at div
at HOC
at div
at App
Consider adding an error boundary to your tree to customize error handling behavior.
Visit
https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Error Message

Uncaught Error: Unable to resolve image URL from source (undefined)
at urlForImage (urlForImage.ts
:43:1) at ImageUrlBuilder.url (builder.ts
:229:1) at ImageUrlBuilder.toString (builder.ts
:234:1) at setValueForProperty (react-dom.development.js
:672:1) at setInitialDOMProperties (react-dom.development.js
:8931:1) at setInitialProperties (react-dom.development.js
:9135:1) at finalizeInitialChildren (react-dom.development.js
:10201:1) at completeWork (react-dom.development.js
:19470:1) at completeUnitOfWork (react-dom.development.js
:22815:1) at performUnitOfWork (react-dom.development.js
:22787:1)

[1]:
https://stackoverflow.com/questions/69031649/error-unable-to-resolve-image-url-from-source-null

Are you passing an entire asset to your

urlFor

or a url?

Hi! I’m not sure what you mean by asset. This is my client.js file which I am using to connect to Sanity client with React app

That part looks right! What I mean is this line:

testimonials[currentIndex].imgurl

. It looks like you're passing a url that is a string to the builder instead of the

asset

object that Sanity sets on an image field.

@*RD (she/they) * - THANK YOU! Ok, so after a few hours of tinkering, your comment made a light go off. You are absolutely right, I was not thinking about what I was passing to the image field. I went back to the SCHEMA for Sanity on my backend, and noticed that there was a typo for that field. I was calling on testimonials[currentIndex].imgurl when it was actually mis-spelled on the backend as ” imageurl “.
There are a bunch of other error messages to deal with now, but this was a big one that had me stuck for days, so thank you, very much!