View Source Sanity.Components.Image (sanity_components v0.6.0)

For rendering a Sanity image asset.

examples

Examples

use Phoenix.Component

# ...

# Example of image asset returned by Sanity CMS API
assigns = %{
  image: %{
    _id: "image-da994d9e87efb226111cb83dbbab832d45b1365e-1500x750-jpg",
    _type: "sanity.imageAsset",
    metadata: %{
      dimensions: %{height: 750, width: 1500},
      palette: %{dominant: %{background: "#0844c5"}}
    },
    url:
      "https://cdn.sanity.io/images/csbsxnjq/production/da994d9e87efb226111cb83dbbab832d45b1365e-1500x750.jpg"
  }
}

~H"<Sanity.Components.Image.sanity_image image={@image} />"

Link to this section Summary

Functions

Returns a GROQ projection for a Sanity image.

Renders a responsive sanity image.

Link to this section Functions

Returns a GROQ projection for a Sanity image.

Renders a responsive sanity image.

The src and srcset attributes will be automatically set. Sanity CMS will take care of resizing the images and serving WebP images to supported browsers. The sizes attribute will default to 100vw.

The width and height attributes will be automatically set. This ensures that on modern browsers the image will have the correct aspect ratio before the image loads. This avoids layout shift.

See module doc for example.