fix: improve PNG and JPG image rendering in document viewer

Author: Bob Strahan

CHANGELOG.md

@@ -31,6 +31,13 @@ SPDX-License-Identifier: MIT-0
   - Image resolution is preserved by default unless explicitly configured via `resize_config`
   - DPI settings now only apply to PDF files, not to image files
   - Resolves issue where PNG files were being converted to lower resolution JPG files
+- **Image File Display in Document Viewer**
+  - Fixed issue where PNG and JPG image files were not rendering inline in the Document Details page
+  - Images were incorrectly loaded in iframes which caused browsers to download them instead of displaying
+  - Added specific handling for image file types to use `<img>` tag instead of iframe
+  - Images now display inline with responsive sizing (max-width: 100%, max-height: 800px)
+  - Added error handling with fallback download link if image fails to load
+  - Maintains consistent UI with other document types (PDF, Excel, Word)
 
 
 ## [0.3.7]

src/ui/src/components/document-viewer/FileViewer.jsx

@@ -239,6 +239,44 @@ const FileViewer = ({ objectKey }) => {
         </Box>
       );
     }
+    // For image files, display them inline using img tag
+    if (fileType === 'image') {
+      return (
+        <Box className="document-container" padding={{ top: 's' }}>
+          <Box textAlign="center">
+            <img
+              src={presignedUrl}
+              alt="Document preview"
+              style={{
+                maxWidth: '100%',
+                maxHeight: '800px',
+                height: 'auto',
+                objectFit: 'contain',
+              }}
+              onError={(e) => {
+                // On error, replace the image with a download link
+                const container = e.target.parentElement;
+                container.innerHTML = `
+                  <div style="padding: 48px;">
+                    <h3>🖼️ Image Document</h3>
+                    <p>Unable to display this image.</p>
+                    <p>
+                      <a href="${presignedUrl}" target="_blank" rel="noopener noreferrer" 
+                         style="display: inline-block; padding: 12px 24px; background-color: #0073bb; 
+                                color: white; text-decoration: none; border-radius: 4px; 
+                                font-weight: bold; margin: 10px;">
+                        📥 Download Image
+                      </a>
+                    </p>
+                  </div>
+                `;
+              }}
+            />
+          </Box>
+        </Box>
+      );
+    }
+
     // For Excel and Docx files, provide download link since browsers can't display them inline
     if (fileType === 'excel' || fileType === 'docx') {
       const fileTypeName = fileType === 'excel' ? 'Excel' : 'Word';