img shown succesfully

frontend/src/components/routes/ArticleDetailComponent.tsx

@@ -66,11 +66,28 @@ export function ArticleDetailComponent({ id }: { id: string }) {
       </div>
 
       {data.featuredImage && (
-        <img
-          src={data.featuredImage}
-          alt={data.title}
-          className="w-full h-64 md:h-96 object-cover rounded-xl mb-8"
-        />
+        <div className="relative w-full h-64 md:h-96 mb-8">
+          <img
+            src={data.featuredImage}
+            alt={data.title}
+            className="w-full h-full object-cover rounded-xl"
+            onError={(e) => {
+              console.error('Failed to load image:', data.featuredImage, e);
+              e.currentTarget.style.display = 'none';
+              // Show fallback
+              const fallback = e.currentTarget.nextElementSibling as HTMLElement;
+              if (fallback) {
+                fallback.style.display = 'flex';
+              }
+            }}
+          />
+          <div 
+            className="absolute inset-0 bg-gray-100 rounded-xl flex items-center justify-center text-gray-400 hidden"
+            style={{ display: 'none' }}
+          >
+            <span>Image not available</span>
+          </div>
+        </div>
       )}
 
       <div className="prose prose-slate max-w-none">