Anonymous inline image error in ImageWithAlt schema for GraphQL deploy

1 replies
Last updated: May 31, 2022
Hi everybody, I’m finding this error:
Error: Encountered anonymous inline image "image" for field/type "ImageWithAlt".
I’ve run into this issue before and the error advises I need to create a top-level schema. I have resolved this in the past by bringing my repeatable content up into my component folder, like this:
export default {
    name: 'ImageWithAlt',
    title: 'Image with Alternative Text',
    type: 'object',
    fields: [
        { 
            name: 'image', 
            title: 'Image', 
            type: 'image',
            options: {
                hotspot: true
            },
            fields: [
                    {
                        name: 'alt',
                        title: 'Alternative text',
                        type: 'string',
                        options: {
                            isHighlighted: true
                    }
                }
            ]  
        },
    ]
}
Then, I use it as a type in my schema:

export default {
    name: 'layoutHeader',
    title: 'Layout Header',
    type: 'document',
    icon,
    fields: [
      { 
        name: 'title', 
        title: 'Title', 
        type: 'string' 
      },
      { 
        name: 'mainlogo', 
        title: 'Logo with Alt Text', 
        type: 'ImageWithAlt',

      },
      {
        name: 'contactnumber',
        title: 'Contact Number',
        type: 'string',
      },
    ],
  }
However, this time I get the same error when I run
sanity graphql deploy
from the CLI. I have been tinkering with it to figure out what’s wrong, but I think I could use some fresh eyes on it. Can anyone tell me what little gotcha I’m missing?
AI Update

I can see the issue! When you add custom fields to an image type (like your alt field), GraphQL requires that custom image type to be defined as a named top-level type, not just as fields within the image field itself.

Your current structure has the alt field nested inside the image field's fields array. For GraphQL deployment, you need to extract that custom image with fields into its own named type first, then reference it.

Here's how to fix it:

Step 1: Create a separate schema file for your custom image type (e.g., imageWithAlt.js):

export default {
  name: 'imageWithAlt',  // lowercase name for the type itself
  title: 'Image with Alt Text',
  type: 'image',  // extends image, not object
  options: {
    hotspot: true
  },
  fields: [
    {
      name: 'alt',
      title: 'Alternative text',
      type: 'string',
      options: {
        isHighlighted: true
      }
    }
  ]
}

Step 2: Update your ImageWithAlt object to use this type:

export default {
  name: 'ImageWithAlt',
  title: 'Image with Alternative Text',
  type: 'object',
  fields: [
    { 
      name: 'image', 
      title: 'Image', 
      type: 'imageWithAlt',  // reference your named type
    },
  ]
}

Step 3: Make sure both types are registered in your sanity.config.js (or schema.js):

import imageWithAlt from './schemas/imageWithAlt'
import ImageWithAlt from './schemas/ImageWithAlt'

export default defineConfig({
  // ... other config
  schema: {
    types: [
      imageWithAlt,  // register the base image type
      ImageWithAlt,  // register your object wrapper
      // ... other types
    ]
  }
})

The key insight: GraphQL can't handle anonymous inline image extensions. When you add custom fields to an image, that customized image must be its own named schema type that extends type: 'image', not nested as fields within a field definition.

After making these changes, run sanity graphql deploy again and the error should be resolved. The GraphQL API will now recognize imageWithAlt as a distinct type that extends the base image type with your custom fields.

This pattern is explained in the Sanity documentation on lifting anonymous object types, which applies to custom image types as well when deploying to GraphQL.

Show original thread
1 reply
Got it, I had an extra layer. So my component needed to be this:
export default {
    name: 'ImageWithAlt',
    title: 'Image with Alternative Text',
    type: 'image',
    options: {
        hotspot: true
    },
    fields: [
            {
                name: 'alt',
                title: 'Alternative text',
                type: 'string',
                options: {
                    isHighlighted: true
            }
        }
    ]  
}

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?