diff --git a/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.html b/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.html
index 3df7c4fa3c9a..cf96fef7f47c 100644
--- a/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.html
+++ b/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.html
@@ -16,7 +16,7 @@
     <div class="demo-container">
       <div id="gridContainer"></div>
       <div id="employeeInfo">
-        <img class="employeePhoto hidden" alt="Employee photo" />
+        <img class="employeePhoto" alt="Employee photo" style="visibility: hidden" />
         <p class="employeeNotes"></p>
       </div>
     </div>
diff --git a/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.js b/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.js
index 1dbbf8434c33..e50c86807de7 100644
--- a/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.js
@@ -27,10 +27,7 @@ $(() => {
       const data = selectedItems.selectedRowsData[0];
       if (data) {
         $('.employeeNotes').text(data.Notes);
-        $('.employeePhoto').attr('src', data.Picture).removeClass('hidden');
-      } else {
-        $('.employeeNotes').text('');
-        $('.employeePhoto').addClass('hidden');
+        $('.employeePhoto').attr('src', data.Picture).attr('style', null);
       }
     },
   });
diff --git a/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css b/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css
index 88181fa44e06..5371ee3dbb56 100644
--- a/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css
@@ -4,10 +4,6 @@
   padding: 20px;
 }
 
-#employeeInfo .employeePhoto.hidden {
-  visibility: hidden;
-}
-
 #employeeInfo .employeeNotes {
   padding-top: 20px;
   text-align: justify;
diff --git a/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.css b/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.css
index 10d2abe7ba88..85fd92141ed7 100644
--- a/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.css
@@ -15,8 +15,10 @@
 ::ng-deep .img {
   height: 50px;
   width: 50px;
-  object-fit: contain;
   margin-right: 10px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
   border-radius: 25px;
   border: 1px solid lightgray;
   background-color: #fff;
diff --git a/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.html b/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.html
index dc1965d0aa5a..972adc2ba2b8 100644
--- a/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.html
+++ b/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.html
@@ -70,11 +70,12 @@
   ></dxi-tree-list-column>
   <div *dxTemplate="let options of 'employeeTemplate'">
     @if(options.data.Task_Assigned_Employee) {
-    <img
+    <div
       class="img"
-      [src]="options.data.Task_Assigned_Employee.Picture"
-      alt=""
-    />
+      style.background-image="url('{{
+        options.data.Task_Assigned_Employee.Picture
+      }}')"
+    ></div>
     } @if(options.data.Task_Assigned_Employee) {
     <span class="name">{{ options.data.Task_Assigned_Employee.Name }}</span>
     }
diff --git a/apps/demos/Demos/TreeList/Overview/React/EmployeeCell.tsx b/apps/demos/Demos/TreeList/Overview/React/EmployeeCell.tsx
index 1b729d397ad4..54cda7266f8e 100644
--- a/apps/demos/Demos/TreeList/Overview/React/EmployeeCell.tsx
+++ b/apps/demos/Demos/TreeList/Overview/React/EmployeeCell.tsx
@@ -10,11 +10,7 @@ const EmployeeCell = (props: TreeListTypes.ColumnCellTemplateData) => {
 
   return (
     <>
-      <img
-        className="img"
-        src={employee.Picture}
-        alt=""
-      />
+      <div className="img" style={{ backgroundImage: `url(${employee.Picture})` }} />
       &nbsp;
       <span className="name">{employee.Name}</span>
     </>
diff --git a/apps/demos/Demos/TreeList/Overview/React/styles.css b/apps/demos/Demos/TreeList/Overview/React/styles.css
index ae902455272f..d575b8ee7dfd 100644
--- a/apps/demos/Demos/TreeList/Overview/React/styles.css
+++ b/apps/demos/Demos/TreeList/Overview/React/styles.css
@@ -15,8 +15,10 @@
 .img {
   height: 50px;
   width: 50px;
-  object-fit: contain;
   margin-right: 10px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
   border-radius: 25px;
   border: 1px solid lightgray;
   background-color: #fff;
diff --git a/apps/demos/Demos/TreeList/Overview/ReactJs/EmployeeCell.js b/apps/demos/Demos/TreeList/Overview/ReactJs/EmployeeCell.js
index 9dd1aaf40eed..8f89e5e1b932 100644
--- a/apps/demos/Demos/TreeList/Overview/ReactJs/EmployeeCell.js
+++ b/apps/demos/Demos/TreeList/Overview/ReactJs/EmployeeCell.js
@@ -7,10 +7,9 @@ const EmployeeCell = (props) => {
   }
   return (
     <>
-      <img
+      <div
         className="img"
-        src={employee.Picture}
-        alt=""
+        style={{ backgroundImage: `url(${employee.Picture})` }}
       />
       &nbsp;
       <span className="name">{employee.Name}</span>
diff --git a/apps/demos/Demos/TreeList/Overview/ReactJs/styles.css b/apps/demos/Demos/TreeList/Overview/ReactJs/styles.css
index ae902455272f..d575b8ee7dfd 100644
--- a/apps/demos/Demos/TreeList/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/TreeList/Overview/ReactJs/styles.css
@@ -15,8 +15,10 @@
 .img {
   height: 50px;
   width: 50px;
-  object-fit: contain;
   margin-right: 10px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
   border-radius: 25px;
   border: 1px solid lightgray;
   background-color: #fff;
diff --git a/apps/demos/Demos/TreeList/Overview/Vue/EmployeeCell.vue b/apps/demos/Demos/TreeList/Overview/Vue/EmployeeCell.vue
index 1e14145028ca..7b27f480665c 100644
--- a/apps/demos/Demos/TreeList/Overview/Vue/EmployeeCell.vue
+++ b/apps/demos/Demos/TreeList/Overview/Vue/EmployeeCell.vue
@@ -1,9 +1,8 @@
 <template>
   <div>
-    <img
+    <div
       v-if="cellData.Task_Assigned_Employee"
-      :src="cellData.Task_Assigned_Employee.Picture"
-      alt=""
+      :style="'background-image:url(' + cellData.Task_Assigned_Employee.Picture + ')'"
       class="img"
     />
     <span
@@ -29,8 +28,10 @@ withDefaults(defineProps<{
 .img {
   height: 50px;
   width: 50px;
-  object-fit: contain;
   margin-right: 14px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
   border-radius: 25px;
   border: 1px solid lightgray;
   background-color: #fff;
diff --git a/apps/demos/Demos/TreeList/Overview/jQuery/index.js b/apps/demos/Demos/TreeList/Overview/jQuery/index.js
index a42ac54f1bf3..5fb29b1957b6 100644
--- a/apps/demos/Demos/TreeList/Overview/jQuery/index.js
+++ b/apps/demos/Demos/TreeList/Overview/jQuery/index.js
@@ -43,7 +43,7 @@ $(() => {
         const currentEmployee = options.data.Task_Assigned_Employee;
         if (currentEmployee) {
           container
-            .append($('<img>', { class: 'img', src: currentEmployee.Picture, alt: '' }))
+            .append($('<div>', { class: 'img', style: `background-image:url(${currentEmployee.Picture});` }))
             .append('\n')
             .append($('<span>', { class: 'name', text: currentEmployee.Name }));
         }
diff --git a/apps/demos/Demos/TreeList/Overview/jQuery/styles.css b/apps/demos/Demos/TreeList/Overview/jQuery/styles.css
index ae902455272f..d575b8ee7dfd 100644
--- a/apps/demos/Demos/TreeList/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/TreeList/Overview/jQuery/styles.css
@@ -15,8 +15,10 @@
 .img {
   height: 50px;
   width: 50px;
-  object-fit: contain;
   margin-right: 10px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
   border-radius: 25px;
   border: 1px solid lightgray;
   background-color: #fff;
diff --git a/apps/demos/testing/etalons/TreeList-Overview (fluent.blue.light).png b/apps/demos/testing/etalons/TreeList-Overview (fluent.blue.light).png
index 12e4c2f19e01..fa30a7f8c116 100644
Binary files a/apps/demos/testing/etalons/TreeList-Overview (fluent.blue.light).png and b/apps/demos/testing/etalons/TreeList-Overview (fluent.blue.light).png differ
diff --git a/apps/demos/testing/etalons/TreeList-Overview (material.blue.light).png b/apps/demos/testing/etalons/TreeList-Overview (material.blue.light).png
index 3e02e2f9a456..e30b17b50f63 100644
Binary files a/apps/demos/testing/etalons/TreeList-Overview (material.blue.light).png and b/apps/demos/testing/etalons/TreeList-Overview (material.blue.light).png differ
diff --git a/apps/demos/utils/server/csp-server.js b/apps/demos/utils/server/csp-server.js
index c60099eff625..6df9611e6921 100644
--- a/apps/demos/utils/server/csp-server.js
+++ b/apps/demos/utils/server/csp-server.js
@@ -169,6 +169,8 @@ const CSP_DEMO_ALLOWLIST = {
   },
   'TreeList/Overview': {
     'img-src': ['data:'],
+    // TODO: fix inline style in cellTemplate (background-image)
+    'style-src': ["'unsafe-inline'"],
   },
   // globalize/message.js uses new Function() internally
   'Localization/UsingGlobalize': {
@@ -186,6 +188,10 @@ const CSP_DEMO_ALLOWLIST = {
   'HtmlEditor/MarkdownSupport': {
     'script-src': ["'unsafe-inline'"],
   },
+  // TODO: fix inline style attribute
+  'DataGrid/RowSelection': {
+    'style-src': ["'unsafe-inline'"],
+  },
   // AI demo: inline <script type="module"> to import OpenAI SDK from esm.sh
   'Chat/AIAndChatbotIntegration': {
     'script-src': ["'unsafe-inline'"],