# Image

## Overview


> Image: Illustration of an Image component.


## When to use this component
- To allow users to upload one or more images.
- Use to present visual information that enhances understanding.
- To offer immediate feedback on image file selection and validation.

## When to use another component
- If the user needs to upload a file that is not an image, use the File component instead.
- If the user needs to provide information that is not an image, use the appropriate data entry components instead.

### Check out
- [File][1]

## Usage

### Supported file types
When possible, display a clear support message showcasing what types of image file types are supported for upload. 

> Image: In the first example with a heart eyes emoji, the image component includes a supporting message providing further context on what image file types are accepted. In the second example with a grimacing emoji, no supporting message is included in the image component.


### Error messaging
Provide specific and clear information about the cause of an error, guiding the user on how to resolve it.

> Image: In the first example with a heart eyes emoji, the user is given context on the cause and resolution of the error. In the second example with a grimacing emoji, no further context is provided.


## Content

### Be concise
Ensure all text and messaging, including labels and helper text, are brief and to the point. 

> Image: In the first example with a heart eyes emoji, the text and messaging are brief and to the point. In the second example with a grimacing emoji the text and messaging are wordy.


[1]: ./File

## Examples


### Basic

```typescript
/* eslint-disable no-console */

import React from 'react';

import Image, { ImageImageChangeHandler } from '@splunk/react-ui/Image';


function Basic() {
    const handleOnImageChange: ImageImageChangeHandler = ({ filename, imageDataURI }) => {
        console.log(
            `Image selected: ${filename}, ${
                imageDataURI !== null ? `${imageDataURI.slice(0, 50)}...` : null
            }`
        );
    };

    return (
        <div style={{ maxWidth: 300 }}>
            <Image onImageChange={handleOnImageChange} />
        </div>
    );
}

export default Basic;
```




## API


### Image API

Image provides the ability to accept image files and present a preview of the image.

#### Props

| Name | Type | Required | Default | Description |
|------|------|------|------|------|
| allowExtensions | string[] | no | ['gif', 'jpeg', 'jpg', 'png'] | Specify the allowed image extensions. Should be an array of image extensions, e.g., ['gif', 'jpg', 'png']. |
| defaultFilename | string | no |  | The default file name of the selected image. In order to render selected image preview, need to set valid defaultFilename (end with allowed image extensions, e.g., 'default.png') and defaultImageDataURI at the same time. |
| defaultImageDataURI | string | no |  | The default selected image data (as data URI). Need to set with defaultFilename at the same time. |
| disabled | boolean | no |  | Prevents user from selecting or dropping images. |
| dropAnywhere | boolean | no |  | Image can be dropped anywhere on the page. |
| elementRef | React.Ref<HTMLDivElement> | no |  | A React ref which is set to the DOM element when the component mounts and null when it unmounts. |
| error | boolean | no |  | Show the component in an error state. |
| onImageChange | ImageImageChangeHandler | no |  | A callback for when the image changes. The function is passed an object containing two keys: `filename` and `imageDataURI`. Both are `null` if the image was removed. |

#### Types

| Name | Type | Description |
|------|------|------|
| ImageImageChangeHandler | (data: {     filename: string \| null;     imageDataURI: string \| null; }) => void |  |