From 6e01e04c76d212a9100f5199494ccb664c7d6194 Mon Sep 17 00:00:00 2001
From: Louis <louis@jan.ai>
Date: Thu, 28 Mar 2024 16:32:33 +0700
Subject: [PATCH] fix: should not show broken image (#2526)

---
 .../ExploreModels/ExploreModelItemHeader/index.tsx        | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx b/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
index 06444b402..86af5e3dd 100644
--- a/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
+++ b/web/screens/ExploreModels/ExploreModelItemHeader/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 
 import { Model } from '@janhq/core'
 import {
@@ -70,6 +70,7 @@ const ExploreModelItemHeader: React.FC<Props> = ({ model, onClick, open }) => {
   const { requestCreateNewThread } = useCreateNewThread()
   const totalRam = useAtomValue(totalRamAtom)
   const { settings } = useSettings()
+  const [imageLoaded, setImageLoaded] = useState(true)
 
   const nvidiaTotalVram = useAtomValue(nvidiaTotalVramAtom)
   const setMainViewState = useSetAtom(mainViewStateAtom)
@@ -143,9 +144,10 @@ const ExploreModelItemHeader: React.FC<Props> = ({ model, onClick, open }) => {
       className="cursor-pointer rounded-t-md bg-background"
       onClick={onClick}
     >
-      {model.metadata.cover && (
-        <div className="relative h-full w-full ">
+      {model.metadata.cover && imageLoaded && (
+        <div className="relative h-full w-full">
           <img
+            onError={() => setImageLoaded(false)}
             src={model.metadata.cover}
             className="h-[250px] w-full object-cover"
             alt={`Cover - ${model.id}`}