Skip to content
Get help on Slack

Trouble displaying cropped image using urlForImage in Sanity.io

1 replies
Last updated: Jun 9, 2023
Using the urlForImage works fine, but now I want to display the cropped image the way it is showing on the back-end the same on the front-end side.
from my GROQ query I got these values:

  crop: {
    right: 0.13602941176470584,
    top: 0,
    left: 0.07720588235294118,
    bottom: 0.5092941176470588,
    _type: 'sanity.imageCrop'
  },
  hotspot: {
    height: 0.41235294117647076,
    _type: 'sanity.imageHotspot',
    width: 0.6764705882352942,
    x: 0.44852941176470607,
    y: 0.23066176470588223
  },
To display the image I do this (with props) which returns 400 bad request. The image is by default 1280 x 1024.

Am i Doing something wrong here?


"url" parameter is valid but upstream response is invalid


const ImageURL = urlForImage(src)
    .width(width)
    .height(height)
    .format("webp")
    .rect(0.07720588235294118, 0, 0.8455882352941176, 1)
    .quality(quality)
    .url()
Jun 9, 2023, 11:35 AM
You’re passing the values directly from 
crop
into the 
rect
method, but it expects pixels .

Here’s how the image-url builder does it .
Jun 9, 2023, 5:12 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?