From 6f70cf5e002cbde469ffecc80e79da9225373adc Mon Sep 17 00:00:00 2001
From: Paul Marbach <paul.marbach@grafana.com>
Date: Tue, 7 Oct 2025 11:13:51 -0400
Subject: [PATCH] Table: Add some error-case handling to ImageCell (#110461)

---
 .../src/components/Table/TableNG/Cells/ImageCell.tsx      | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Table/TableNG/Cells/ImageCell.tsx b/packages/grafana-ui/src/components/Table/TableNG/Cells/ImageCell.tsx
index 805374f4471..e79fc968d54 100644
--- a/packages/grafana-ui/src/components/Table/TableNG/Cells/ImageCell.tsx
+++ b/packages/grafana-ui/src/components/Table/TableNG/Cells/ImageCell.tsx
@@ -1,17 +1,23 @@
 import { css } from '@emotion/css';
+import { useState } from 'react';
 
 import { TableCellDisplayMode } from '../../types';
 import { MaybeWrapWithLink } from '../components/MaybeWrapWithLink';
 import { ImageCellProps, TableCellStyles } from '../types';
 
 export const ImageCell = ({ cellOptions, field, value, rowIdx }: ImageCellProps) => {
+  const [error, setError] = useState(false);
   const { text } = field.display!(value);
   const { alt, title } =
     cellOptions.type === TableCellDisplayMode.Image ? cellOptions : { alt: undefined, title: undefined };
 
+  if (!text) {
+    return null;
+  }
+
   return (
     <MaybeWrapWithLink field={field} rowIdx={rowIdx}>
-      <img alt={alt} src={text} title={title} />
+      {error ? text : <img alt={alt} src={text} title={title} onError={() => setError(true)} />}
     </MaybeWrapWithLink>
   );
 };