NoImagePlaceholder

When to use

Product cells and cards when imageUrl is empty. Export NoImageApparel, NoImageFootwear, or NoImageEquipment by division.

When NOT to use

Generic empty states — use Podium illustration patterns. Loading skeletons — use Podium Skeleton.

Props

Auto-generated from src/components/NoImagePlaceholder/NoImagePlaceholder.types.ts. Do not edit by hand. Run pnpm docs:props after changing source JSDoc.

NoImagePlaceholderProps

Props for division-specific “no image” SVG placeholders. Use NoImageApparel, NoImageFootwear, or NoImageEquipment depending on product division when imageUrl is missing.

Prop	Type	Required	Description
className	string	No	Additional CSS class name merged onto the SVG root.
height	number | string	No	SVG height in pixels or CSS length.
style	CSSProperties	No	Inline styles applied to the SVG root.
width	number | string	No	SVG width in pixels or CSS length.

Examples

Apparel placeholder

import { NoImageApparel } from '@nike/whisker-component-library';

{
  product.imageUrl ? (
    <img src={product.imageUrl} alt="" />
  ) : (
    <NoImageApparel width={80} height={80} />
  );
}

Live playground