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

For rendering a Sanity image asset.

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"}}
    },
    mime_type: "image/jpeg",
    url:
      "https://cdn.sanity.io/images/csbsxnjq/production/da994d9e87efb226111cb83dbbab832d45b1365e-1500x750.jpg"
  }
}

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

Summary

Functions

Returns a GROQ projection for a Sanity image.

Renders a responsive sanity image.

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 width and height attributes will be automatically set to the dimensions of the image. This ensures that on modern browsers the image will have the correct aspect ratio before the image loads. This avoids layout shift.

The following CSS custom properties will be set if present in the Sanity image metadata:

  • --sanity-image-bg - Dominant background color of image. Useful for rendering placeholders.
  • --sanity-image-height and --sanity-image-width - Height/width of image.

See module doc for example.

Attributes

  • image (:any) (required)
  • height (:integer) - Defaults to nil.
  • width (:integer) - Defaults to nil.
  • style (:string) - Defaults to nil.
  • sizes (:string) - Defaults to "100vw".
  • Global attributes are accepted.