fix: server image loading failure (#534)

RainyNight9 · web-flow · commit ee531209aa18 · 2025-05-20T09:31:54.000+08:00
* fix: server image loading failure

* docs: update notes
diff --git a/docs/content.en/docs/release-notes/_index.md b/docs/content.en/docs/release-notes/_index.md
@@ -54,6 +54,7 @@ Information about release notes of Coco Server is provided here.
 - style: history component styles #528
 - fix: app icon & category icon #529
 - style: search error styles #533
+- fix: server image loading failure #534
 
 ## 0.4.0 (2025-04-27)
 
diff --git a/src/components/Assistant/ServerList.tsx b/src/components/Assistant/ServerList.tsx
@@ -205,6 +205,10 @@ export function ServerList({
                       src={server?.provider?.icon || logoImg}
                       alt={server.name}
                       className="w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800"
+                      onError={(e) => {
+                        const target = e.target as HTMLImageElement;
+                        target.src = logoImg;
+                      }}
                     />
                     <div className="text-left flex-1 min-w-0">
                       <div className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate max-w-[200px]">
diff --git a/src/components/Cloud/Cloud.tsx b/src/components/Cloud/Cloud.tsx
@@ -319,6 +319,10 @@ export default function Cloud() {
                 width="100%"
                 src={currentService?.provider?.banner || bannerImg}
                 alt="banner"
+                onError={(e) => {
+                  const target = e.target as HTMLImageElement;
+                  target.src = bannerImg;
+                }}
               />
             </div>
             <div className="flex items-center justify-between mb-4">
diff --git a/src/components/Cloud/Sidebar.tsx b/src/components/Cloud/Sidebar.tsx
@@ -38,6 +38,10 @@ export const Sidebar = forwardRef<{ refreshData: () => void }, SidebarProps>(
             src={item?.provider?.icon || cocoLogoImg}
             alt="LogoImg"
             className="w-5 h-5 flex-shrink-0"
+            onError={(e) => {
+              const target = e.target as HTMLImageElement;
+              target.src = cocoLogoImg;
+            }}
           />
           <span className="font-medium truncate max-w-[140px]">{item?.name}</span>
           <div className="flex-1" />
