diff --git a/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.html b/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.html
index cf96fef7f47c..3df7c4fa3c9a 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" alt="Employee photo" style="visibility: hidden" />
+        <img class="employeePhoto hidden" alt="Employee photo" />
         <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 e50c86807de7..1dbbf8434c33 100644
--- a/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.js
+++ b/apps/demos/Demos/DataGrid/RowSelection/jQuery/index.js
@@ -27,7 +27,10 @@ $(() => {
       const data = selectedItems.selectedRowsData[0];
       if (data) {
         $('.employeeNotes').text(data.Notes);
-        $('.employeePhoto').attr('src', data.Picture).attr('style', null);
+        $('.employeePhoto').attr('src', data.Picture).removeClass('hidden');
+      } else {
+        $('.employeeNotes').text('');
+        $('.employeePhoto').addClass('hidden');
       }
     },
   });
diff --git a/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css b/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css
index 5371ee3dbb56..88181fa44e06 100644
--- a/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css
+++ b/apps/demos/Demos/DataGrid/RowSelection/jQuery/styles.css
@@ -4,6 +4,10 @@
   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 85fd92141ed7..10d2abe7ba88 100644
--- a/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.css
@@ -15,10 +15,8 @@
 ::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 972adc2ba2b8..dc1965d0aa5a 100644
--- a/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.html
+++ b/apps/demos/Demos/TreeList/Overview/Angular/app/app.component.html
@@ -70,12 +70,11 @@
   ></dxi-tree-list-column>
   <div *dxTemplate="let options of 'employeeTemplate'">
     @if(options.data.Task_Assigned_Employee) {
-    <div
+    <img
       class="img"
-      style.background-image="url('{{
-        options.data.Task_Assigned_Employee.Picture
-      }}')"
-    ></div>
+      [src]="options.data.Task_Assigned_Employee.Picture"
+      alt=""
+    />
     } @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 54cda7266f8e..1b729d397ad4 100644
--- a/apps/demos/Demos/TreeList/Overview/React/EmployeeCell.tsx
+++ b/apps/demos/Demos/TreeList/Overview/React/EmployeeCell.tsx
@@ -10,7 +10,11 @@ const EmployeeCell = (props: TreeListTypes.ColumnCellTemplateData) => {
 
   return (
     <>
-      <div className="img" style={{ backgroundImage: `url(${employee.Picture})` }} />
+      <img
+        className="img"
+        src={employee.Picture}
+        alt=""
+      />
       &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 d575b8ee7dfd..ae902455272f 100644
--- a/apps/demos/Demos/TreeList/Overview/React/styles.css
+++ b/apps/demos/Demos/TreeList/Overview/React/styles.css
@@ -15,10 +15,8 @@
 .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 8f89e5e1b932..9dd1aaf40eed 100644
--- a/apps/demos/Demos/TreeList/Overview/ReactJs/EmployeeCell.js
+++ b/apps/demos/Demos/TreeList/Overview/ReactJs/EmployeeCell.js
@@ -7,9 +7,10 @@ const EmployeeCell = (props) => {
   }
   return (
     <>
-      <div
+      <img
         className="img"
-        style={{ backgroundImage: `url(${employee.Picture})` }}
+        src={employee.Picture}
+        alt=""
       />
       &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 d575b8ee7dfd..ae902455272f 100644
--- a/apps/demos/Demos/TreeList/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/TreeList/Overview/ReactJs/styles.css
@@ -15,10 +15,8 @@
 .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 7b27f480665c..1e14145028ca 100644
--- a/apps/demos/Demos/TreeList/Overview/Vue/EmployeeCell.vue
+++ b/apps/demos/Demos/TreeList/Overview/Vue/EmployeeCell.vue
@@ -1,8 +1,9 @@
 <template>
   <div>
-    <div
+    <img
       v-if="cellData.Task_Assigned_Employee"
-      :style="'background-image:url(' + cellData.Task_Assigned_Employee.Picture + ')'"
+      :src="cellData.Task_Assigned_Employee.Picture"
+      alt=""
       class="img"
     />
     <span
@@ -28,10 +29,8 @@ 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 5fb29b1957b6..a42ac54f1bf3 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($('<div>', { class: 'img', style: `background-image:url(${currentEmployee.Picture});` }))
+            .append($('<img>', { class: 'img', src: currentEmployee.Picture, alt: '' }))
             .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 d575b8ee7dfd..ae902455272f 100644
--- a/apps/demos/Demos/TreeList/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/TreeList/Overview/jQuery/styles.css
@@ -15,10 +15,8 @@
 .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 fa30a7f8c116..12e4c2f19e01 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 e30b17b50f63..3e02e2f9a456 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 51a2424d70c4..4ebdbca39fe6 100644
--- a/apps/demos/utils/server/csp-server.js
+++ b/apps/demos/utils/server/csp-server.js
@@ -173,8 +173,6 @@ 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': {
@@ -192,10 +190,6 @@ 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'"],