CHANGELOG.md

+## [1.36.2](https://gitlab.com/TIBHannover/orkg/orkg-ask/frontend/compare/v1.36.1...v1.36.2) (2024-12-03)
+
+
+### Bug Fixes
+
+* add placeholder image for broken topic thumbnails ([0981b68](https://gitlab.com/TIBHannover/orkg/orkg-ask/frontend/commit/0981b689b0c80458f0cc2ee46de066f2c0e946a4))
+
 ## [1.36.1](https://gitlab.com/TIBHannover/orkg/orkg-ask/frontend/compare/v1.36.0...v1.36.1) (2024-12-02)
 
 

package-lock.json

 {
   "name": "orkg-ask",
-  "version": "1.36.1",
+  "version": "1.36.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "orkg-ask",
-      "version": "1.36.1",
+      "version": "1.36.2",
       "dependencies": {
         "@dnd-kit/core": "^6.1.0",
         "@dnd-kit/sortable": "^8.0.0",

package.json

 {
   "name": "orkg-ask",
-  "version": "1.36.1",
+  "version": "1.36.2",
   "private": true,
   "scripts": {
     "dev": "NODE_OPTIONS='--inspect' next dev --turbo",

src/app/[locale]/item/[id]/[[...slug]]/Topics/TopicImage/TopicImage.tsx

+'use client';
+
+import { faImage } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Image from 'next/image';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+export default function TopicImage({ thumbnail }: { thumbnail?: string }) {
+  const [src, setSrc] = useState(thumbnail);
+  const t = useTranslations();
+
+  return src ? (
+    <div className="w-[50px] h-[50px] relative">
+      <Image
+        src={src}
+        layout="fill"
+        objectFit="cover"
+        alt={t('drab_least_monkey_kiss')}
+        className="rounded-xl border-2 border-secondary-300"
+        onError={() => {
+          setSrc('');
+        }}
+      />
+    </div>
+  ) : (
+    <div className="w-[50px] h-[50px] bg-secondary-200 rounded-2xl flex justify-center items-center">
+      <FontAwesomeIcon icon={faImage} className="text-secondary" />
+    </div>
+  );
+}

src/app/[locale]/item/[id]/[[...slug]]/Topics/Topics.tsx

 import { capitalize } from 'lodash';
-import Image from 'next/image';
 import { getTranslations } from 'next-intl/server';
 
+import TopicImage from '@/app/[locale]/item/[id]/[[...slug]]/Topics/TopicImage/TopicImage';
 import { components } from '@/services/backend/types';
 import { DbpediaResource, getResource } from '@/services/dbpedia';
 
@@ -35,19 +35,8 @@ export default async function Topics({ topics }: TopicsProps) {
               className="bg-secondary-50 rounded-2xl px-4 py-2"
             >
               <div className="flex">
-                {dbpediaTopic?.thumbnail ? (
-                  <div className="w-[50px] h-[50px] relative">
-                    <Image
-                      src={dbpediaTopic.thumbnail}
-                      layout="fill"
-                      objectFit="cover"
-                      alt={t('drab_least_monkey_kiss')}
-                      className="rounded-xl border-2 border-secondary-300"
-                    />
-                  </div>
-                ) : (
-                  <div className="w-[50px] h-[50px] bg-slate-200 rounded-2xl" />
-                )}
+                <TopicImage thumbnail={dbpediaTopic?.thumbnail} />
+
                 <div className="ms-3">
                   <a
                     href={topic.uri}