
# Image Renderer

The Image cell renderer interprets the value of the data cell as an image URL and downloads and displays the image.

## How to display the image renderer

1. If the value of the cell data is the address of an image, the image at this address is displayed.  
2. Use callback to use the image address as the return value.  
3. Display the image using the imageMap function.  
    (In the example below, the "image Map" column only specifies 'EUR' and 'USD' to display only two images.)

```js
const fields = [
  {
    fieldName: "imageUrl",
    dataType: "text"
  },
  {
    fieldName: "KorName",
    dataType: "text"
  },
  {
    fieldName: "Gender",
    dataType: "text"
  },
  {
    fieldName: "Age",
    dataType: "number"
  },
  {
    fieldName: "Phone",
    dataType: "text"
  },
  {
    fieldName: "ProductId",
    dataType: "text"
  },
  {
    fieldName: "KorCountry",
    dataType: "text"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "CardNumber",
    dataType: "text"
  },
  {
    fieldName: "Monetary",
    dataType: "text"
  },
  {
    fieldName: "StartDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "EndDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "ToMonth",
    dataType: "number"
  },
  {
    fieldName: "Month",
    dataType: "number"
  },
  {
    fieldName: "Year",
    dataType: "number"
  },
  {
    fieldName: "InterestRate",
    dataType: "number"
  },
  {
    fieldName: "SaveCost",
    dataType: "number"
  },
  {
    fieldName: "SaveMaturity",
    dataType: "number"
  },
  {
    fieldName: "CurrentSave",
    dataType: "number"
  }
];

const columns = [
  {
    name: "KorName",
    fieldName: "KorName",
    width: "60",
    header: {
      text: "Name"
    }
  },
  {
    name: "imageUrl",
    fieldName: "imageUrl",
    width: "150",
    renderer: {
      type: "image",
      imageField: "imageUrl",
      imageHeight: 80
    },
    header: {
      text: "Image URL",
      styleName: "orange-column"
    }
  },
  {
    name: "imageUrl1",
    fieldName: "Monetary",
    width: "150",
    renderer: {
      type: "image",
      imageCallback: function (grid, cell) {
        var monetary = grid.getValue(cell.item.index, "Monetary");
        return "/images/monetaryFlag/" + monetary + ".png";
      },
      imageHeight: 80
    },
    header: {
      text: "Image Callback",
      styleName: "orange-column"
    }
  },
  {
    name: "imageUrl2",
    fieldName: "Monetary",
    width: "150",
    renderer: {
      type: "image",
      imageMap: {
        "EUR": "/images/monetaryFlag/EUR.png",
        "USD": "/images/monetaryFlag/USD.png"
      },
      imageHeight: 80
    },
    header: {
      text: "Image Map",
      styleName: "orange-column"
    }
  },
  {
    name: "Monetary",
    fieldName: "Monetary",
    width: "40",
    header: {
      text: "Currency"
    }
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "40",
    header: {
      text: "Gender"
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "40",
    header: {
      text: "Age"
    },
    styleName: "right-column"
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    styleName: "right-column",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductId",
    fieldName: "ProductId",
    width: "120",
    styleName: "right-column",
    header: {
      text: "Product ID"
    }
  },
  {
    name: "KorCountry",
    fieldName: "KorCountry",
    width: "100",
    styleName: "right-column",
    header: {
      text: "Investment Country"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "100",
    header: {
      text: "Order Date"
    }
  },
  {
    name: "CardNumber",
    fieldName: "CardNumber",
    width: "140",
    header: {
      text: "Card Number"
    }
  },
  {
    name: "StartDate",
    fieldName: "StartDate",
    width: "100",
    header: {
      text: "First Payment Date"
    }
  },
  {
    name: "EndDate",
    fieldName: "EndDate",
    width: "100",
    header: {
      text: "End Date"
    }
  },
  {
    name: "ToMonth",
    fieldName: "ToMonth",
    width: "50",
    header: {
      text: "Payment Count"
    },
    styleName: "right-column"
  },
  {
    name: "Month",
    fieldName: "Month",
    width: "50",
    header: {
      text: "Remaining Count"
    },
    styleName: "right-column"
  },
  {
    name: "InterestRate",
    fieldName: "InterestRate",
    width: "50",
    header: {
      text: "Interest Rate"
    },
    styleName: "right-column"
  },
  {
    name: "SaveCost",
    fieldName: "SaveCost",
    width: "70",
    header: {
      text: "Payment Amount"
    },
    styleName: "right-column"
  },
  {
    name: "SaveMaturity",
    fieldName: "SaveMaturity",
    width: "120",
    header: {
      text: "Maturity Amount"
    },
    styleName: "right-column"
  },
  {
    name: "CurrentSave",
    fieldName: "CurrentSave",
    width: "80",
    header: {
      text: "Current Balance"
    },
    styleName: "right-column"
  }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 100,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data_image.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;
```

```js
var columns = [
   ... skip ...
     {
         name: "imageUrl",
         fieldName: "imageUrl",
         width: "150",
         renderer: {
             type: "image",
             imageField: "imageUrl",
             imageHeight: 80;
         },
         header: {
           text: "Image URL"
         }
     },
     {
         name: "imageUrl1",
         fieldName: "Monetary",
         width: "150",
         renderer: {
             type: "image",
             imageCallback: function (grid, cell) {
                 var monetary = grid.getValue(cell.item.index, "Monetary");
                 return "/images/monetaryFlag/" + monetary + ".png";
             },
             imageHeight: 80
         },
         header: {
           text: "Image Callback"
         }
     },
     {
         name: "imageUrl2",
         fieldName: "Monetary",
         width: "150",
         renderer: {
             type: "image",
             imageMap: {
                 "EUR": "/images/monetaryFlag/EUR.png",
                 "USD": "/images/monetaryFlag/USD.png"
             },
             imageHeight: 80;
            
         },
         header: {
           text: "Image Map"
         }
     },
   ... skip ...
];

gridView.setColumns(columns);
```