#  Image

### Intro

Enhanced img tag with multiple image fill modes, support for loading hint, loading failure hint.

### Install

``` javascript
// react
import { Image } from '@nutui/nutui-react-native';

```

## Code

### Basic Usage

The basic usage is similar to the native img tag. You can set the source, width, height and other native attributes.

:::demo
```SnackPlayer name=Image&dependencies=@nutui/nutui-react-native
import React from "react";
import { Image } from '@nutui/nutui-react-native';

const App = () => {
  return <>
      <Image
          source={{
            uri: 'https://img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg'
          }}
          width={90}
          height={90}
        />
  </>
}
export default App;

```
:::

### Object Fill

The `resizeMode` attribute is used to set the image filling mode, which is equivalent to the original `Object-fit` attribute.

:::demo
```SnackPlayer name=Image&dependencies=@nutui/nutui-react-native
import React from "react";
import { Image } from '@nutui/nutui-react-native';

const App = () => {
  return <>
      <Image
      source={{ uri: 'https://img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg' }}
      resizeMode='contain'
      width={90}
      height={90}
    />
  </>
}
export default App;

```

### Round

The round attribute allows you to set the image to be round. 

:::demo

```SnackPlayer name=Image&dependencies=@nutui/nutui-react-native
import React from "react";
import { Image } from '@nutui/nutui-react-native';

const App = () => {

  return <>
   <Image
      source={{ uri: 'https://img10.360buyimg.com/ling/jfs/t1/181258/24/10385/53029/60d04978Ef21f2d42/92baeb21f907cd24.jpg' }}
      width={90}
      height={90}
      round
    />
  </>
}
export default App;

```
:::

### Loading

The Image component provides a default loading prompt and supports custom content through the loading slot.

:::demo
```SnackPlayer name=Image&dependencies=@nutui/nutui-react-native
import React from "react";
import { Image, Icon } from '@nutui/nutui-react-native';

const App = () => {
  return <>
     <Image
          width={90}
          height={90}
          showLoading
          slotLoding={
            <>
              <Icon name='loading' />
            </>
          }
        />
  </>
}
export default App;

```
:::

### Error

The Image component provides a default loading failure warning and supports custom content through the error slot.

:::demo
```SnackPlayer name=Image&dependencies=@nutui/nutui-react-native
import React from "react";
import { Image, Icon } from '@nutui/nutui-react-native';

const App = () => {
  return <>
        <Image
            width={90}
            height={90}
            source={{ uri: 'https://x' }}
            showError
          >
            <Icon name='circle-close' />
        </Image>
  </>
}
export default App;

```

## API

### Props

| Attribute         | Description                             | Type   | Default          |
|--------------|----------------------------------|--------|------------------|
| source         | Src               | { uri: ''} or require('xx') | -                |
| resizeMode         | Fit mode, same as object-fit    | ImageFit | 'contain'            |
| width         | Width                  | number | -                |
| height         | Height                | number | -                |
| round         | Whether to be round               | Boolean | false              |
| radius         | Border Raduis                | String \| Numer | -                |
| showError         | Whether to show error placeholder| Boolean | true              |
| showLoading         | Whether to show loading placeholder               | Boolean | true              |
| loadingImg `v1.4.6`    | Set the prompt image during loading, which conflicts with `slotLoding` and has a higher priority than `slotLoding`     | String | -              |
| errorImg   `v1.4.6`    | Set the error prompt image, which conflicts with `slotError` and has a higher priority than `slotError`         | String | -              |

### ImageFit 

| Attribute         | Description                             |
|--------------|----------------------------------|
| contain         | Keep aspect ratio, fully display the long side of the image    |
| cover         | Keep aspect ratio, fully display the short side of the image, cutting the long side     |
| stretch    | Stretch and resize image to fill the content box  |
| center    | Center without stretching  |
| repeat    | Repeat tiling the picture until the container is filled |



### Slots
| Attribute         | Description                             |
|--------------|----------------------------------|
| loading      | Custom loading placeholder     |
| error    | Custom error placeholder  |

### Events

| Event | Description           | Arguments     |
|--------|----------------|--------------|
| onClick  | Emitted when image is clicked | event: Event |
| onLoad  | Emitted when image loaded | - |
| onError  | Emitted when image load failed | event: Event |

