Nuxt Sanity images not rendering, getting empty asset error in Studio

I can help you troubleshoot both the image rendering issue in Nuxt and the "asset empty" problem in your Studio. Let me walk you through the most common causes and solutions.

Setting Up Image URL Builder Correctly

The most common issue with Nuxt and Sanity images is that there is no built-in $urlFor helper in @nuxtjs/sanity. You need to create your own image URL builder function using @sanity/image-url.

First, make sure you have the required packages installed:

npm install @nuxtjs/sanity @sanity/image-url

Then create a composable to handle image URLs. Create a file like composables/useSanityImage.ts:

import imageUrlBuilder from '@sanity/image-url'
import type { SanityImageSource } from '@sanity/image-url/lib/types/types'
import { useSanity } from '@nuxtjs/sanity/composables'

export function useSanityImage() {
  const sanityClient = useSanity()
  const builder = imageUrlBuilder(sanityClient.config)
  
  function urlFor(source: SanityImageSource) {
    return builder.image(source)
  }
  
  return { urlFor }
}

Now you can use it in your components:

<script setup>
const query = groq`*[_type == "post"]{
  _id,
  title,
  image
}`

const { data: posts } = await useSanityQuery(query)
const { urlFor } = useSanityImage()
</script>

<template>
  <div v-for="post in posts" :key="post._id">
    <img 
      v-if="post.image?.asset" 
      :src="urlFor(post.image).width(800).url()" 
      :alt="post.title"
    />
  </div>
</template>

Fixing the "Asset Empty" Studio Issue

If you're seeing an empty asset object in the Studio, this usually indicates one of these problems:

1. Image Schema Configuration

Make sure your schema properly defines the image field as type 'image':

defineField({
  name: 'image',
  title: 'Image',
  type: 'image',
  options: {
    hotspot: true // optional but recommended
  }
})

2. Image Upload Failed or Still Processing

Sanity processes image metadata asynchronously after upload. If you just uploaded the image:

• Wait a few seconds and refresh the Studio
• Check your browser console for upload errors
• Try re-uploading the image

3. Delete and Re-upload

If the asset is permanently empty, delete the image field value in your document and upload a fresh image. This usually resolves corrupted references.

Verify Your GROQ Query

Make sure your GROQ query returns the complete image object with its asset reference:

*[_type == "post"]{
  _id,
  title,
  image  // Returns full image object including asset reference
}

A properly uploaded image should return data structured like this:

{
  "_type": "image",
  "asset": {
    "_ref": "image-abc123xyz...",
    "_type": "reference"
  }
}

If the asset object is empty ({}), the image wasn't properly uploaded.

Check Your Nuxt Configuration

Verify your nuxt.config.ts has the correct Sanity configuration:

export default defineNuxtConfig({
  modules: ['@nuxtjs/sanity'],
  sanity: {
    projectId: 'your-project-id',
    dataset: 'production',
    apiVersion: '2024-03-15', // use current date
  },
})

Debugging Steps

Add console logging to see what data you're actually receiving:

<script setup>
const { data: posts } = await useSanityQuery(query)
console.log('Posts data:', posts)
console.log('First image:', posts?.[0]?.image)
console.log('Asset reference:', posts?.[0]?.image?.asset)
</script>

Check if:

• The asset property exists on your image object
• The asset._ref or asset._id is present
• The data structure matches what the image URL builder expects

Quick Troubleshooting Checklist

• ✅ Schema defines field as type: 'image' (not 'file')
• ✅ Created your own urlFor function using imageUrlBuilder from @sanity/image-url
• ✅ GROQ query returns the full image object
• ✅ @nuxtjs/sanity and @sanity/image-url are installed
• ✅ Sanity config has correct projectId and dataset
• ✅ Images show a preview thumbnail in Studio (not empty)
• ✅ Using conditional rendering v-if="image?.asset" to avoid errors
• ✅ Calling .url() at the end of your image builder chain

The key issue is usually that images won't render without properly setting up the image URL builder yourself - it's not automatically available as a helper in Nuxt. Once you create the useSanityImage composable as shown above, your images should start rendering correctly. The image URL builder gives you access to Sanity's globally-distributed CDN with automatic caching and optimization.