{/* Do not edit this file. It is automatically generated by API Documenter. */}


## ImageCellRenderer

image renderer

**Signature:**

```typescript
export interface ImageCellRenderer extends CellRenderer
```
**Extends:** [CellRenderer](/refs/Interface/CellRenderer)

## Remarks

The value of the data cell is interpreted as a URL, and the image is downloaded and displayed.

\[Superclass\]

[CellRenderer](/refs/Interface/CellRenderer)

## Example


```js
//string type
column.renderer = 'image';

// object type
column.renderer = {
      type: "image",
      imageMap: {
          "value1": "images/apple.jpg",
          "value2": "images/banana.jpg"
      },
      titleField: "fruits"
}
```

## Events

| Property | Type | Description |
| --- | --- | --- |
| [imageCallback](/refs/Interface/ImageCellRenderer#imagecallback) | [GetImageCallback](/refs/realgrid#getimagecallback) | A callback that specifies the path to the image for rendering the image |
| [titleCallback](/refs/Interface/ImageCellRenderer#titlecallback) | [GetCellTitleCallback](/refs/realgrid#getcelltitlecallback) | Callback to set alt text of image |

## Properties

| Property | Type | Description |
| --- | --- | --- |
| [enterKey](/refs/Interface/ImageCellRenderer#enterkey) | boolean | If true, onCellItemClicked is executed when enterKey is entered. |
| [exportImage](/refs/Interface/ImageCellRenderer#exportimage) | boolean | If true, the image is exported to Excel. |
| [imageField](/refs/Interface/ImageCellRenderer#imagefield) | string | Field name of the field to be read as a url value for image rendering |
| [imageHeight](/refs/Interface/ImageCellRenderer#imageheight) | number | image height |
| [imageMap](/refs/Interface/ImageCellRenderer#imagemap) | \{ \[value: string\]: string; \} | Key-value pair of cell value and url to correspond to that cell value |
| [imageWidth](/refs/Interface/ImageCellRenderer#imagewidth) | number | image width |
| [spaceKey](/refs/Interface/ImageCellRenderer#spacekey) | boolean | If true, onCellItemClicked is executed when the space bar is entered. |
| [titleField](/refs/Interface/ImageCellRenderer#titlefield) | string | Field name of the field to be read as the alt text value of the image |
| [type](/refs/Interface/ImageCellRenderer#type) | "image" | Category: Images |

## Events Desc

### imageCallback

A callback that specifies the path to the image for rendering it.

`Type` - [GetImageCallback](/refs/realgrid#getimagecallback)

**Remarks:**

If `false` is returned, rendering by the corresponding callback is canceled.

It follows the format of [GetImageCallback](/refs/realgrid#getimagecallback).

\[Property List\]

`grid` - GridBase control

`model` - a cell in the grid

**Example:**


```js
const f = function(grid, model) {
 const base = '/images/';
 if (jpgSet.indexOf(model.value)){
 return base + model.value + '.jpg';
 }
 else base + 'default.jpg';
}

column.renderer = {
 type: 'image',
 imageCallback:f
}
```

<hr/>

### titleCallback

Callback to set alt text of image

`Type` - [GetCellTitleCallback](/refs/realgrid#getcelltitlecallback)

**Remarks:**

It should return the alt text to be set.

It follows the format of [GetCellTitleCallback](/refs/realgrid#getcelltitlecallback).

**Example:**


```js
const f = function(grid, model) {
 return 'cat image'
}
column.renderer = {
 type: 'image',
 imageMap: {
 value1: 'images/fatcat.jpg',
 value2: 'images/bluecat.jpg'
 },
 titleCallback: f
}
```

<hr/>

## Properties Desc

### enterKey

If true, onCellItemClicked is executed when enterKey is entered.

`Type` - boolean

<hr/>

### exportImage

If true, the image is exported to Excel.

`Type` - boolean

**Remarks:**

If [GridExportOptions.exportImage](/refs/Interface/GridExportOptions#exportimage){/* */} is `false`{/* */}, it is not output.

<hr/>

### imageField

Field name of the field to be read as a url value for image rendering

`Type` - string

**Remarks:**

Applies when [ImageCellRenderer.imageCallback](/refs/Interface/ImageCellRenderer#imagecallback) is not assigned or returns `undefined`{/* */}.

**Example:**


```js
column.renderer = {
 "type": "image",
 "imageField": "Cats"
}
```

<hr/>

### imageHeight

image height

`Type` - number

<hr/>

### imageMap

Key-value pair of cell value and url to correspond to that cell value

`Type` - \{ \[value: string\]: string; \}

**Remarks:**

Applies when [ImageCellRenderer.imageCallback](/refs/Interface/ImageCellRenderer#imagecallback) is not assigned or returns `undefined`{/* */}.

**Example:**


```js
column.renderer = {
 type: 'image',
 imageMap: {
 value1: 'images/e_equals_mc_square.jpg'
 }
}
```

<hr/>

### imageWidth

image width

`Type` - number

<hr/>

### spaceKey

If true, onCellItemClicked is executed when the space bar is entered.

`Type` - boolean

<hr/>

### titleField

Field name of the field to be read as the alt text value of the image

`Type` - string

**Example:**


```js
column.renderer = {
 "type": "image",
 "imageMap": {
 "value1": "images/fatcat.jpg",
 "value2": "images/bluecat.jpg"
 },
 "titleField": "CatName"
}
```

<hr/>

### type

Category: Image

`Type` - "image"

<hr/>