Troubleshooting error with importing images in a project

11 replies
Last updated: Mar 10, 2023
having a strange error with importing images,
the error im getting in the console :

Uncaught TypeError: Cannot read properties of null (reading 'asset')
pointing to line 59 - 64 as follows -

{ => (
            <NavigationImg src={studio.image.asset.url} />
and my import statement looks like this -

const Studios = () => {
  const [studios, setStudios] = useState([]);

  useEffect(() => {
        `*[_type == "studios"]{
      .then((data) => setStudios(data))
      .catch((error) => console.error(error));
  }, []);
this same solution worked on another page in the same site that im building but i cant seem to get images to work on this import, is there anything im overlooking?
Mar 8, 2023, 7:08 PM
Can you post your Groq query? Looks like you’re not expanding the reference to your image
Mar 8, 2023, 7:10 PM
sorry, i posted before i finished writing on accident, question has been updated
Mar 8, 2023, 7:11 PM
Try this:

"imageUrl": image.asset->url,
Mar 8, 2023, 7:11 PM
I’m guessing that you’re either trying to read a value before the promise has resolved or you have an image field that isn’t set and is coming back as
Mar 8, 2023, 7:12 PM
user R
where would that go?
Mar 8, 2023, 7:14 PM
i tried sending in what you posted on the import statment and it didnt make a difference. not sure where im going wrong, all image fields are set and shouldnt be coming back null
Mar 8, 2023, 7:18 PM
Are you using the image-url builder?
Mar 8, 2023, 8:58 PM
im using the image url builder in my client.js but unsure how to apply it in practice, i cant seem to figure it out.

import { createClient } from "@sanity/client";
import imageUrlBuilder from "@sanity/image-url";

export const config = {
    projectId: 'nf98xbc0',
    dataset: 'production',
    apiVersion: '2023-03-02',
    useCdn: true,

const builder = imageUrlBuilder(config);

export const sanityClient = createClient(config);

function urlFor(source) {
    return builder.image(source);
Mar 9, 2023, 1:22 AM
I would basically use Optional Chaining operator as this is mostly a runtime error.

<NavigationImg src={studio.image?.asset?.url} />
And from that, I’d make sure that to see by checking perhaps with
whether I really have
object properties that we’re accessing here…
Mar 9, 2023, 1:23 PM
this fixed the error in the console, but no images are shown
Mar 9, 2023, 5:36 PM
If you ran your GROQ, you get the URL of the image in the result? If yes, I would check the data by
for example
Mar 10, 2023, 12:51 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the 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?