今日已更新 386 条资讯 | 累计 20358 条内容
关于我们

Sanity image-url hotspot not working: four causes and fixes

Nayan Kyada 2026年07月16日 14:40 0 次阅读 来源:Dev.to

Sanity's hotspot and crop system works well when all the pieces line up — but if your rendered image is ignoring the focal point you set in Studio, one of four things is almost certainly wrong. None of them are subtle bugs; they're all configuration mistakes that are easy to miss and easy to fix. The four causes (and their fixes) 1. fit is still set to clip instead of crop This is the most common cause. The @sanity/image-url builder defaults to fit('clip') , which scales the image to fit inside the requested dimensions without cropping anything. Hotspot data is only applied when the builder is told to crop — that is, when it cuts the image down to the requested dimensions, centering the cut on the focal point. Fix: always chain .fit('crop') when you pass .width() and .height() . // src/lib/sanity-image.ts import imageUrlBuilder from ' @sanity/image-url ' import { client } from ' ./sanity-client ' const builder = imageUrlBuilder ( client ) export function urlFor ( source : SanityImageSource ) { return builder . image ( source ) } // Usage — hotspot will only apply if fit is 'crop' const url = urlFor ( image ) . width ( 800 ) . height ( 600 ) . fit ( ' crop ' ) // <-- required for hotspot to do anything . auto ( ' format ' ) . url () Without .fit('crop') , Sanity's CDN receives no crop instruction and the hotspot coordinates are silently ignored. 2. Missing options: { hotspot: true } on the schema field If the image field in your Sanity schema is not configured with hotspot support, Studio never renders the focal point UI, and the hotspot and crop keys are never written to the document in the first place. The URL builder can't use data that isn't there. Fix: add options: { hotspot: true } to every image field where editors need focal control. // schemas/post.ts export default { name : ' post ' , type : ' document ' , fields : [ { name : ' coverImage ' , type : ' image ' , options : { hotspot : true , // <-- enables the focal point UI in Studio }, }, ], } After adding

本文内容来源于互联网,版权归原作者所有
查看原文