fix: add image fallback chain for missing game covers in search

This commit is contained in:
2026-04-28 22:30:19 +08:00
parent 59e3ca338b
commit ab27ba948f
2 changed files with 20 additions and 6 deletions
+18 -6
View File
@@ -43,6 +43,7 @@ interface UnifiedResult {
isPoorPerformance?: boolean isPoorPerformance?: boolean
bestFps?: number | null bestFps?: number | null
latestVersion?: string | null latestVersion?: string | null
tinyImage?: string | null
} }
function SearchContent() { function SearchContent() {
@@ -240,7 +241,7 @@ function SearchResultCard({
whileHover={{ scale: 1.03 }} whileHover={{ scale: 1.03 }}
transition={{ duration: 0.2 }} transition={{ duration: 0.2 }}
> >
<GameCover image={result.image} title={result.title} /> <GameCover image={result.image} tinyImage={result.tinyImage} title={result.title} />
</motion.div> </motion.div>
{/* Main Content */} {/* Main Content */}
@@ -507,18 +508,29 @@ function protonColor(status: string): string {
return map[status] || "text-text/25" return map[status] || "text-text/25"
} }
function GameCover({ image, title }: { image: string | null; title: string }) { function GameCover({ image, tinyImage, title }: { image: string | null; tinyImage?: string | null; title: string }) {
const [error, setError] = useState(false) const [src, setSrc] = useState(image)
const [fallbackStage, setFallbackStage] = useState(0)
if (image && !error) { const handleError = () => {
if (fallbackStage === 0 && tinyImage) {
setFallbackStage(1)
setSrc(tinyImage)
} else {
setFallbackStage(2)
setSrc(null)
}
}
if (src) {
return ( return (
<Image <Image
src={image} src={src}
alt={title} alt={title}
fill fill
className="object-cover" className="object-cover"
sizes="(max-width: 640px) 80px, 112px" sizes="(max-width: 640px) 80px, 112px"
onError={() => setError(true)} onError={handleError}
/> />
) )
} }
+2
View File
@@ -269,6 +269,7 @@ export const searchUnifiedRoutes = new Elysia({ prefix: "/search" }).get(
appId: g.steamAppId, appId: g.steamAppId,
title: g.title, title: g.title,
image: g.capsuleImage || g.headerImage, image: g.capsuleImage || g.headerImage,
tinyImage: g.capsuleImage || g.headerImage || null,
developer: g.developer, developer: g.developer,
publisher: g.publisher, publisher: g.publisher,
description: g.description, description: g.description,
@@ -299,6 +300,7 @@ export const searchUnifiedRoutes = new Elysia({ prefix: "/search" }).get(
appId: item.id, appId: item.id,
title: item.name, title: item.name,
image: `https://cdn.akamai.steamstatic.com/steam/apps/${item.id}/library_600x900.jpg`, image: `https://cdn.akamai.steamstatic.com/steam/apps/${item.id}/library_600x900.jpg`,
tinyImage: item.tiny_image || null,
developer: null, developer: null,
publisher: null, publisher: null,
description: null, description: null,