Skip to content
👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events
Get help on Slack

Troubleshooting error with importing images in a Sanity.io 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 -


{studios.map((studio) => (
          <NavigationCard>
            <NavigationImg src={studio.image.asset.url} />
            <NavigationTitle>{studio.name}</NavigationTitle>
          </NavigationCard>
        ))}
and my import statement looks like this -


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

  useEffect(() => {
    sanityClient
      .fetch(
        `*[_type == "studios"]{
          name,
          image{
            asset->{
              _id,
              url
            }
          }
        }`
      )
      .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 
null
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?
https://www.sanity.io/docs/image-url
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 
console.log
the 
data
whether I really have 
asset.url
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 
console.log
for example
Mar 10, 2023, 12:51 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.

Get started for freeExplore the demo

Was this answer helpful?