Image
Use EuiImage when you need to place a static image into a page with an optional caption.
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.
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.