Sanity image blurhash returns null in GROQ query

3 replies
Last updated: Jun 16, 2023
Hey everyone! My image
blurhash
always returns a
null
value and I am not sure why.. Here is my groq query:
*[_type == "homePage"] | order(_updatedAt desc) [0] {
  sections[] {
    ...,
    _type == "contentImage" => {
      ...,
      image {
        ...,
        "height": asset->metadata.dimensions.height,
        "width": asset->metadata.dimensions.width,
        "dimensions": asset->metadata.dimensions,
        "blurhash": asset->metadata.blurHash,
        "lqip": asset->metadata.lqip
      }
    }
  }
}
In my Vision tool I keep getting a
null
value, but all other values work..
My
picture
schema is like this:
export default {
  title: 'Image',
  name: 'picture',
  type: 'image',
  icon: ImageSquare,
  options: {
    hotspot: true,
    metadata: ['lqip', 'blurhash']
  },
  fields: [
    {
      title: 'Alternative Text',
      name: 'alt',
      type: 'string',
      description: 'A short description of the image. Important for SEO and accessiblity.',
      validation: (Rule) => Rule.required()
    },
    {
      title: 'Display Size (Aspect Ratio)',
      name: 'customRatio',
      type: 'string',
      description: 'Select how the image is displayed. This affects the aspect ratio of the image within its container.',
      options: {
        list: aspectRatios
      },
      initialValue: 'aspect-0'
    }
  ],
  preview: {
    select: {
      alt: 'alt',
      filename: 'asset.originalFilename',
      dimensions: 'asset.metadata.dimensions',
      image: 'asset'
    },
    prepare({ alt, dimensions, filename, image }) {
      return {
        title: alt ?? filename,
        subtitle: dimensions ? `${dimensions.width}px × ${dimensions.height}px` : '…',
        media: image ?? ImageSquare
      }
    }
  }
}

AI Update

I can see your issue! Looking at the official Sanity documentation, the correct field name is blurHash with a capital H. However, there's a more common reason why you're getting null values.

Based on the image metadata documentation, here are the most likely causes:

1. Images uploaded before metadata was configured

This is the most common cause. If your images were uploaded before you added metadata: ['lqip', 'blurhash'] to your schema, they won't have blurhash data. Sanity only generates metadata for images uploaded after the metadata options are configured in your schema.

Solution: You'll need to re-upload the images. The metadata is generated at upload time and isn't retroactively applied to existing assets.

2. Metadata processing still in progress

Metadata is generated asynchronously after upload. If images were just uploaded, the blurhash might not be available yet. Wait a few moments and refresh your query.

3. Your GROQ query is correct

Your query uses "blurhash": asset->metadata.blurHash (with capital H), which is correct according to the documentation. The field is stored as blurHash with a capital H in the asset metadata, as shown in the image type documentation.

Quick test to diagnose:

Try uploading a brand new image after confirming your schema has metadata: ['lqip', 'blurhash'] configured. If that new image gets a blurhash value but old ones don't, you'll know you need to re-upload your existing images.

Your schema configuration looks perfect - you've correctly specified metadata: ['lqip', 'blurhash'] in the options, which tells Sanity to generate both metadata types for newly uploaded images. The issue is almost certainly that your existing images were uploaded before this configuration was in place, so they're missing the blurhash data entirely.

Show original thread
3 replies
Hi (Removed Name). Is
contentImage
in your
homePage
schema of the type
picture
? If it is, was
blurhash
specified in your
metadata
array at the time the image was uploaded?
Hi
user A
No lol.. sorry its a bit confusing, the
picture
is the name of the schema, but it is a type of
image
. Hmm no it wasn't specified in my image at the time of upload.. Let me give that a try
Oh wow its working now haha.. Seems I had to upload the images after I declared my
metadata: ['lqip', 'blurhash']
. Thanks for the help (Removed Name) you're the man

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?