Image

Usage

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

<div style={{ width: 200, 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 example above 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 ocurred 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>}
/>

Radius

Radius has predefined values: xs, sm, md, lg, xl which are defined in theme.radius. Alternatively you can use 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 }

Radius is applied both to image and placeholder.

Get element ref

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

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

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