How to correctly model an array type with an image and url

I can see you're getting an error when trying to add a url type element to your array. The issue here is that url is a primitive string type, while image is a complex object type, and mixing them directly in an array can cause problems in the Studio UI.

The Solution: Wrap Your URL in an Object

The standard approach to fix this is to wrap your URL in an object type so both array members have a consistent structure:

{
  name: 'referenceList',
  type: 'array',
  title: 'References',
  of: [
    {
      type: 'object',
      name: 'urlReference',
      title: 'URL Reference',
      fields: [
        {
          name: 'url',
          type: 'url',
          title: 'URL'
        }
      ]
    },
    {
      type: 'image',
      name: 'imageReference',
      title: 'Image Reference'
    }
  ]
}

Why This Works

The image type is already a complex object with internal structure (asset reference, hotspot, crop data, etc.). When you try to mix a primitive url type directly with image, the Studio has trouble rendering the array interface consistently. By wrapping the URL in an object, you're giving both array members a similar structure, which makes the Studio UI work smoothly.

According to the Sanity documentation on array fields, arrays support multiple member types, and this pattern of wrapping primitives in objects is commonly used when combining different content types.

Querying Your Data

When you query this structure, you can differentiate between the types using the _type field that Sanity automatically adds:

*[_id == "your-doc-id"] {
  referenceList[] {
    _type,
    _type == "urlReference" => { url },
    _type == "imageReference" => { 
      asset->
    }
  }
}

Additional Benefits

Wrapping the URL in an object also gives you:

• Extensibility: You can easily add more fields later (like title, description, or linkText) without restructuring your data
• Better Studio UI: Objects display more clearly in the array interface with better previews
• Validation options: You can add field-level validation to the URL or other fields within the object

This pattern is a common practice in Sanity schemas when you need to mix different content types in arrays, especially when combining primitive types with complex types like images or references.