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.
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 tonil
.width
(:integer
) - Defaults tonil
.style
(:string
) - Defaults tonil
.sizes
(:string
) - Defaults to"100vw"
.- Global attributes are accepted.