1 files changed, 30 insertions, 1 deletions
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 056e9f0..8f43d25 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -1,7 +1,8 @@
 import { marked } from 'marked';
 import './style.css'
+import { openLightbox } from './lightbox';
 
-interface Note {
+export interface Note {
   uri: string;
   authorDID: string;
   authorHandle: string;
@@ -174,11 +175,39 @@ function createNoteElement(note: Note): HTMLElement {
     note.media.forEach(item => {
       const img = document.createElement('img');
       img.src = item.url;
+      img.src = item.url;
       img.alt = item.alt || '';
+      img.className = item.alt ? 'has-alt' : 'no-alt';
       if (item.width && item.height) {
         img.width = item.width;
         img.height = item.height;
       }
+      img.style.cursor = 'pointer';
+      const index = note.media!.indexOf(item);
+      img.addEventListener('click', () => openLightbox(note.media!, index));
+      mediaDiv.appendChild(img);
+      img.onerror = () => {
+        const errDiv = document.createElement('div');
+        errDiv.className = 'note-media-error';
+
+        const icon = document.createElement('img');
+        icon.src = '/image-unavailable.svg';
+        icon.alt = '';
+        errDiv.appendChild(icon);
+
+        const label = document.createElement('div');
+        label.className = 'info';
+        label.textContent = 'Image unavailable';
+        errDiv.appendChild(label);
+
+        if (item.alt) {
+          const altText = document.createElement('div');
+          altText.textContent = item.alt;
+          errDiv.appendChild(altText);
+        }
+
+        img.replaceWith(errDiv);
+      };
       mediaDiv.appendChild(img);
     });
     content.appendChild(mediaDiv);