Index
Edit

Presenting Images

You've stored images in Sanity, and you want to display them. What are your options?

To recap, a typical image asset data object looks something like this:

{
  _id: "image-e950XJ1yORkbh9tIyHOMuDaf-4032x3024-jpg",
  _rev: "9EaSBOfMzX5YiAyE7rARzk",
  _type: "sanity.imageAsset",
  _createdAt: "2017-06-20T13:16:57+02:00",
  _updatedAt: "2017-06-20T13:16:59+02:00",
  assetId: "e950XJ1yORkbh9tIyHOMuDaf",
  path: "images/3do82whm/production/e950XJ1yORkbh9tIyHOMuDaf-4032x3024.jpg",
  url: "https://cdn.sanity.io/images/3do82whm/production/e950XJ1yORkbh9tIyHOMuDaf-4032x3024.jpg",
  metadata: {
    dimensions: {
      aspectRatio: 1.333,
      height: 3024,
      width: 4032
    },
    location: {
      alt: 61.815,
      lat: 59.924,
      lon: 10.758
    }
  }
}

When you want to display this image, grab the url field and use it like you would normally, for example:

<img src="https://cdn.sanity.io/images/3do82whm/production/e950XJ1yORkbh9tIyHOMuDaf-4032x3024.jpg" />

And you have your image!

However, end users appreciate fast download times and minimal bandwidth usage, so scaling down the images you present makes sense. To do this, simply add the wanted query parameters to your image URL. Here are some examples:

Width

w=[number of pixels]

E.g. https://cdn.sanity.io/image.png?w=100

Height

h=[number of pixels]

E.g. https://cdn.sanity.io/image.png?h=400

Orientation

Force image orientation

o=[0, 90, 180, 270]

E.g. https://cdn.sanity.io/image.png?o=90

Download

Trigger a browser download

dl=<target-filename>

E.g. https://cdn.sanity.io/image.png?dl=target-filename.jpg

Keep in mind: Requested images are edge cached on a CDN so it makes sense to re-use image sizes to avoid cache misses.

Previous: Query Cheat SheetNext: Reference