Image
Usage
The image component is a technical component that facilitates the use of the HTML img tag. For usage recommendations, see the W3C docs.
Code
<Image src="path/to/image" />
Import statement
import { Image } from '@jutro/components';
Component contract
Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.
Properties
srcrequired- Type
stringDescriptionSpecifies the URL of the image.
alt- TypeDescription
Specifies an alternate text for the image.
className- Type
stringDescriptionCSS class name for this component.
containerClassName- Type
stringDescriptionClass name for the containing figure node.
figcaption- TypeDescription
The caption for the figure.
onError- Type
funcDescriptionScript to be run when an error occurs when the image is being loaded.
onLoad- Type
funcDescriptionScript to be run when the image is loaded successfully.
showLoader- Type
booleanDescriptionShow a loader animation when the image is still loading.
Default valuetrue sizes- Type
stringDescriptionHTML <img> srcset attribute. See here for more info.
srcSet- Type
stringDescriptionHTML <img> srcset attribute. See here for more info.
width- Type
numberDescriptionSpecifies the width of the image.
Hooks
No hooks are available for image.
Translation keys
There are no translations for image.
For information on how to manage translations, see our section about Internationalization.
Escape hatches
For more information, see our documentation about escape hatches.
Examples
Check out the Usage section for details about how to design an image component properly, and the different configuration options we provide.
Basic image example
The image component makes the HTML <img> tag available in Jutro, including i18n and metadata, and wraps it in a <figure>.
<Image src="path/to/image" />
Caption example
The figcaption property can be used to add a caption to the <figure>.
<Image
src="path/to/image"
figcaption="This is a sample caption"
/>