Image
Use EuiImage when you need to place a static image into a page with an optional caption.
Writing meaningful image alt text
This page has several examples of alt text written to aid screen reader users, as well as several examples of when not to include alt text. When an image is decorative, or if the image is adequately described by surrounding text, it is better to pass an empty
"" string instead.When an image is not already sufficiently described, the alt text passed should help non-visual users understand the purpose of the image within the context of the overall page. See
WebAIM for a more detailed guide to writing effective alt text.Click an image for a fullscreen version
Apply the allowFullScreen prop to make the image clickable and show a fullscreen version. Note that the second image also passes fullScreenIconColor="dark" to change icon color to better contrast against the light background of that image.
Images can be sized
Images can be sized by passing the size prop a value of s / m / l / xl / original / fullWidth / number / string. This size sets the maximum length of the longest edge of the image, whether that is height or width, and scales it. Only the provided sizing values will also increase the size of a smaller image.
Supporting SVG images
If you are using an SVG source within EuiImage, the SVG image may not show up! While this is surprising to the user, if your image doesn't have a width or viewbox set, it is behaving in accordance with the SVG spec.
In order to work with an SVG image that lacks a defined size, you'll want to set a size prop. If you are using the allowFullScreen prop as well, you will also want to add a width prop.
Float images within text
When using EuiImage within EuiText it is often useful to apply floats. Almost always you'll want to pair the float prop usage, with a margin prop usage to give space around your image. Margins, when used in combo with floats, will adjust depending upon the position of the float.
Be careful with floats
Floats should only be used on images within large bodies of text. Specifically, we only suggest using them with EuiText which comes automatically clears floats.
Props
EuiImage
Prop | Description and type | Default value |
|---|---|---|
Prop alt# | Description and type Alt text should describe the image to aid screen reader users. See If no meaningful description exists, or if the image is adequately string | Default value Required |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop src# | Description and type Requires either string | Default value |
Prop url# | Description and type Type: string | Default value |
Prop caption# | Description and type Provides a visible caption to the image ReactNode | Default value |
Prop size# | Description and type Accepts string | number | Default value original |
Prop float# | Description and type Float the image to the left or right. Useful in large text blocks. "left" | "right" | Default value |
Prop margin# | Description and type Margin around the image. "s" | "m" | "l" | "xl" | Default value |
Prop hasShadow# | Description and type When set to boolean | Default value |
Prop allowFullScreen# | Description and type When set to boolean | Default value |
Prop onFullScreen# | Description and type Callback when the image is clicked and (isFullScreen: boolean) => void | Default value |
Prop fullScreenIconColor# | Description and type Changes the color of the icon that floats above the image when it can be clicked to fullscreen. EuiImageButtonIconColor | Default value |
Prop wrapperProps# | Description and type Props to add to the wrapping figure element CommonProps & HTMLAttributes<HTMLDivElement> | Default value |