From cd206f4dd3f34c39e98ef32e72988ce3ed975657 Mon Sep 17 00:00:00 2001
From: sebastien <lorber.sebastien@gmail.com>
Date: Mon, 7 Sep 2026 12:23:09 +0200
Subject: [PATCH] fix Showcase image bug

---
 website/src/data/users.tsx                                  | 3 ++-
 .../src/pages/showcase/_components/ShowcaseCard/index.tsx   | 6 ++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/website/src/data/users.tsx b/website/src/data/users.tsx
index cfc9f27f2620..548f2e2bcf8b 100644
--- a/website/src/data/users.tsx
+++ b/website/src/data/users.tsx
@@ -7,6 +7,7 @@
 
 import {translate} from '@docusaurus/Translate';
 import {sortBy} from '@site/src/utils/jsUtils';
+import type {Props as IdealImageProps} from '@theme/IdealImage';
 
 /*
  * ADD YOUR SITE TO THE DOCUSAURUS SHOWCASE
@@ -2386,7 +2387,7 @@ const Users: User[] = [
 export type User = {
   title: string;
   description: string;
-  preview: string | null; // null = use our serverless screenshot service
+  preview: IdealImageProps['img'] | string | null; // null = use our serverless screenshot service
   website: string;
   source: string | null;
   tags: TagType[];
diff --git a/website/src/pages/showcase/_components/ShowcaseCard/index.tsx b/website/src/pages/showcase/_components/ShowcaseCard/index.tsx
index 052d6cee33fd..b292b0c77470 100644
--- a/website/src/pages/showcase/_components/ShowcaseCard/index.tsx
+++ b/website/src/pages/showcase/_components/ShowcaseCard/index.tsx
@@ -9,9 +9,11 @@ import React from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import Translate from '@docusaurus/Translate';
+import Image from '@theme/IdealImage';
 import {Tags, TagList, type TagType, type User} from '@site/src/data/users';
 import {sortBy} from '@site/src/utils/jsUtils';
 import Heading from '@theme/Heading';
+import type {Props as IdealImageProps} from '@theme/IdealImage';
 import FavoriteIcon from '../FavoriteIcon';
 import styles from './styles.module.css';
 
@@ -49,7 +51,7 @@ function ShowcaseCardTag({tags}: {tags: TagType[]}) {
   );
 }
 
-function getCardImage(user: User): string {
+function getCardImage(user: User): IdealImageProps['img'] {
   return (
     user.preview ??
     // TODO make it configurable
@@ -64,7 +66,7 @@ function ShowcaseCard({user}: {user: User}) {
   return (
     <li key={user.title} className="card shadow--md">
       <div className={clsx('card__image', styles.showcaseCardImage)}>
-        <img src={image} alt={user.title} loading="lazy" />
+        <Image img={image} alt={user.title} loading="lazy" />
       </div>
       <div className="card__body">
         <div className={clsx(styles.showcaseCardHeader)}>