Warning! The Image component is deprecated.
No new features will be added to this component.
See each page under Components/Image section in the navigation to reference old documentation.
For any new instances of an icon please use the Image element.
Web Component Usage
Bolt Image is a web component that renders a semantic <img> tag with Bolt styles. All that's required to make a <bolt-image> are the src and alt attributes.
<bolt-image src="/images/placeholders/tout-4x3-climber.jpg" alt="A Rock Climber"></bolt-image>
Responsize Images
Optionally, pass srcset and sizes to <bolt-image> for responsive images.
<bolt-image src="/images/placeholders/tout-4x3-climber.jpg" srcset="/images/placeholders/tout-4x3-climber-320.jpg 320w" sizes="auto" alt="A Rock Climber"></bolt-image>
Setting the Aspect-ratio
Setting the aspect ratio on an image provides a placeholder while the image is loading. Do this by adding the ratio attribute with the image's aspect-ratio as slash-separated values, e.g. "4/3" or "400/300".
<bolt-image src="/images/placeholders/tout-4x3-climber.jpg" alt="A Rock Climber" ratio="4/3"></bolt-image>
Lazyloading
Lazyloading is on by default. Turn it off with the no-lazy attribute.
<bolt-image src="/images/placeholders/tout-4x3-climber.jpg" alt="A Rock Climber" no-lazy></bolt-image>
Custom Placeholder
Placeholder image and color options can be set via the attributes placeholder-image and placeholder-color where "image" is an image path and "color" is a valid CSS background-color. Note: the ratio attribute must be provided for placholder image or color to display.
<bolt-image src="/images/placeholders/tout-4x3-climber.jpg" alt="A Rock Climber" ratio="4/3" placeholder-color="#D3D3D3" placeholder-image="http://placehold.it/400x300"></bolt-image>