harden media

apps/website/components/drivers/DriverCard.tsx

@@ -33,6 +33,7 @@ export default function DriverCard(props: DriverCardProps) {
   const driverViewModel = new DriverViewModel({
     id,
     name,
+    avatarUrl: null,
   });
 
   return (

apps/website/components/drivers/DriverIdentity.tsx

@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import Image from 'next/image';
+import PlaceholderImage from '@/components/ui/PlaceholderImage';
 import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 
 export interface DriverIdentityProps {
@@ -21,8 +22,8 @@ export default function DriverIdentity(props: DriverIdentityProps) {
 
   const metaTextClasses = 'text-xs md:text-sm text-gray-400';
 
-  // Use provided avatar URL or fallback to default avatar path
-  const avatarUrl = driver.avatarUrl || `/api/media/avatar/${driver.id}`;
+  // Use provided avatar URL or show placeholder if null
+  const avatarUrl = driver.avatarUrl;
 
   const content = (
     <div className="flex items-center gap-3 md:gap-4 flex-1 min-w-0">
@@ -30,13 +31,17 @@ export default function DriverIdentity(props: DriverIdentityProps) {
         className={`rounded-full bg-primary-blue/20 overflow-hidden flex items-center justify-center shrink-0`}
         style={{ width: avatarSize, height: avatarSize }}
       >
-        <Image
-          src={avatarUrl}
-          alt={driver.name}
-          width={avatarSize}
-          height={avatarSize}
-          className="w-full h-full object-cover"
-        />
+        {avatarUrl ? (
+          <Image
+            src={avatarUrl}
+            alt={driver.name}
+            width={avatarSize}
+            height={avatarSize}
+            className="w-full h-full object-cover"
+          />
+        ) : (
+          <PlaceholderImage size={avatarSize} />
+        )}
       </div>
 
       <div className="flex-1 min-w-0">