Image

Usage

Image component is a wrapper around img element with option to change object fit, radius and placeholder:

<div style={{ width: 240, margin: 'auto' }}>
  <Image
    radius="md"
    src="https://images.unsplash.com/long-image-url-was-here.jpg"
    alt="Random unsplash image"
  />
</div>

Width and height

In the example above, the image takes 100% of width of its container and height is calculated dynamically based on image proportion. To change this behavior, set image width and height to define image size.

Note that if image proportions do not match given width and height, some parts will be cut out. In case you want to show image in its original proportions but fitted in current width and height set fit="contain":

// By default image will have object-fit: cover
<Image
  width={200}
  height={80}
  src="https://images.unsplash.com/long-image-url-was-here.jpg"
/>

// Set fit="contain" to preserve image proportions
// in this case image wrapper will still have given width and height
<Image
  width={200}
  height={80}
  fit="contain"
  src="https://images.unsplash.com/long-image-url-was-here.jpg"
/>

// It's not necessary to use both width and height
<Image
  height={80}
  src="https://images.unsplash.com/long-image-url-was-here.jpg"
/>

Placeholder

By default, placeholders image placeholders are disabled. Image placeholder is displayed in these cases:

• withPlaceholder prop is set to true
• Image is currently loading
• Error occurred during image loading (e.g. broken link)
• Image did not receive src prop

To customize image placeholder pass any react node to placeholder prop. Placeholder size is determined by width and height props. Placeholder is centered vertically and horizontally across provided width and height.

This image contained the meaning of life

<Image
  width={200}
  height={120}
  src={null}
  alt="Without placeholder"
/>

<Image
  width={200}
  height={120}
  src={null}
  alt="With default placeholder"
  withPlaceholder
/>

<Image
  height={120}
  width={200}
  src="42.png"
  alt="With custom placeholder"
  withPlaceholder
  placeholder={<Text align="center">This image contained the meaning of life</Text>}
/>

With caption

You can add figcaption to an image with caption prop:

<div style={{ width: 240, margin: 'auto' }}>
  <Image
    radius="md"
    src="https://images.unsplash.com/long-image-url-was-here.jpg"
    alt="Random unsplash image"
    caption="My dog begging for treats"
  />
</div>

Radius

Radius is applied both to image and placeholder. Radius has predefined values: xs, sm, md, lg, xl which are defined in theme.radius. Alternatively, you can use a number to set border-radius in px:

<Image radius={0} /> // -> default – image has no radius
<Image radius="lg" /> // -> theme predefined large radius
<Image radius={10} /> // -> { borderRadius: 10 }

Get refs

You can get both image and root element (div) refs with ref and imageRef props:

import { useRef } from 'react';
import { Image } from '@mantine/core';

function Demo() {
  const imageRef = useRef();
  const rootRef = useRef();
  return <Image ref={rootRef} imageRef={imageRef} />;
}