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
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.