@neo4j-ndl/react/skills/ndl-react/components/ai/image-tag.md

React implementation of Neo4j Design System

# ImageTag

Import: `import { ImageTag } from '@neo4j-ndl/react/ai'`

## Props

### ImageTag

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `alt` | `string` | ✅ |  | The alt text of the image |
| `fileName` | `string` | ✅ |  | The name of the image |
| `fileType` | `string` | ✅ |  | The type of the image, e.g. 'jpg', 'png', 'gif', etc. |
| `isLoading` | `boolean` |  | `false` | Whether the image tag is loading |
| `isRemovable` | `boolean` |  | `false` | Whether the image tag is removable |
| `onClick` | `((e: MouseEvent<HTMLElement, MouseEvent>) => void)` |  |  | Callback function triggered either when the image tag is clicked, or when the remove button is clicked (if isRemovable is true) |
| `ref` | `any` |  |  | A ref to apply to the root element. |
| `src` | `string` | ✅ |  | The source of the image |

## Examples

### Chat

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { ImageTag } from '@neo4j-ndl/react/ai';

const Component = () => {
  return (
    <ImageTag
      src="https://plus.unsplash.com/premium_photo-1676496046182-356a6a0ed002?q=80&w=2952&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt="Landscape image"
      fileName="Landscape image"
      fileType="jpg"
    />
  );
};

export default Component;
```

### Loading

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { ImageTag } from '@neo4j-ndl/react/ai';

const Component = () => {
  return (
    <ImageTag
      isLoading={true}
      src="https://plus.unsplash.com/premium_photo-1676496046182-356a6a0ed002?q=80&w=2952&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt="Landscape image"
      fileName="Landscape image"
      fileType="jpg"
      onClick={() => {
        alert('remove image');
      }}
    />
  );
};

export default Component;
```

### Prompt

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { ImageTag } from '@neo4j-ndl/react/ai';

const Component = () => {
  return (
    <ImageTag
      src="https://plus.unsplash.com/premium_photo-1676496046182-356a6a0ed002?q=80&w=2952&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
      alt="Landscape image"
      fileName="Landscape image"
      fileType="jpg"
      isRemovable={true}
      onClick={() => {
        alert('remove image');
      }}
    />
  );
};

export default Component;
```