Issue with adding and using images in Sanity project, resolved by disabling cache in Next.js query.

This is a common issue that happens when an image asset gets corrupted or doesn't upload completely. Based on a similar case from the Sanity community, there are a few likely causes and solutions.

Most Common Cause: Incomplete Asset Upload

When you manually add an image through the Studio, sometimes the asset doesn't complete uploading properly. This creates a malformed asset reference in your document. The image field might look fine in the Studio, but the underlying asset data is incomplete or missing critical information that @sanity/image-url needs to build the URL.

How to Fix It

1. Remove and re-upload the image

In the Studio, click the remove/delete option on that specific image field, publish the change, then re-upload the image fresh. This usually resolves the issue because it creates a complete, valid asset reference.

2. Check for Next.js caching issues (Most likely culprit!)

This is actually the most common reason if the image looks fine in the Studio but still fails in your Next.js project. Next.js (especially v13+) has aggressive caching that might be serving stale data. The error persists even after fixing the asset because your app is still using cached data from when the image was broken.

Try adding cache-busting options to your data fetching:

// For fetch calls
const data = await fetch(query, { cache: 'no-store' })

// Or use Next.js revalidation
const data = await fetch(query, { next: { revalidate: 0 } })

In the linked case, the developer resolved it by disabling Next.js's cache on that specific query. Clear your browser cache and restart your dev server after making this change.

3. Verify the asset structure

Console.log the problematic image object vs. a working one. A properly uploaded image asset should have a complete structure like:

{
  _type: 'image',
  asset: {
    _ref: 'image-abc123...',
    _type: 'reference'
  }
}

If the problematic image has null, undefined, or is missing the asset._ref field, that confirms a corrupted upload.

Why This Happens

The "Unable to resolve image URL from source" error from builder.image(source) specifically means the image URL builder can't find valid asset information to work with - it's receiving undefined or malformed data instead of a proper image asset reference. This typically happens when:

• The initial seed/upload script didn't wait for the asset upload to complete
• Network issues interrupted the upload
• The asset was deleted but the reference remains
• Next.js is caching old data that had a null value (most common!)

Prevention

When seeding data programmatically, make sure your image upload process completes fully before creating the document reference. If you're using the Sanity client to upload assets, wait for the upload promise to resolve completely before referencing the asset in your document.