We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

show images into datagrid


i have a grid which contains data from tree database tables. İ want add in one of the grid column a image. Actually i can fetch into image column the data from images Table from database which calls imagepath and  a data for example: xyz.jpg.
How can i use this path to show the image into my grid. 

İ found only one example about images into datagrid in demo:


But this was not helpful enough. 

Attachment: productt_5ea354e0.zip

1 Reply

PS Pavithra Subramaniyam Syncfusion Team November 15, 2019 07:11 AM UTC

Hi Nurhan, 
Greetings from Syncfusion support. 
You can achieve your requirement by using the below way. Please refer to the below code example, documentation link and sample link for more information. 
  <div id="app"> 
    <ejs-grid id="Grid" :columns="columns" ref="grid" :dataSource="data" :allowPaging="true"></ejs-grid> 
import Vue from "vue"; 
import { GridPluginPage } from "@syncfusion/ej2-vue-grids"; 
import { data } from "./datasource"; 
export default { 
  data() { 
    return { 
      data: data, 
      columns: [ 
          field: "OrderID", 
          headerText: "Order ID", 
          width: 120, 
          textAlign: "Right" 
          field: "CustomerID", 
          headerText: "Customer ID", 
          width: 150, 
          showInColumnChooser: false 
          field: "EmployeeID", 
            '<div class="image"> <img src="https://ej2.syncfusion.com/vue/demos/src/grid/images/${EmployeeID}.png" alt="${EmployeeID}" /></div>', 
          headerText: "Employee ID", 
          width: 130 
  provide: { 
    grid: [Page] 
  methods: {} 
.image img { 
  height: 55px; 
  width: 55px; 
  border-radius: 50px; 
  box-shadow: inset 0 0 1px #e0e0e0inset 0 0 14px rgba(0000.2); 
Documentation for template with column directives:  https://ej2.syncfusion.com/vue/documentation/grid/columns/#column-template 
Please get back to us if you need any further assistance on this. 
Pavithra S. 

Live Chat Icon For mobile
Up arrow icon