Image Component

The Image component allows AI agents to fetch images using natural language descriptions or serve static image files from your CDN.

Basic Usage

AI-Generated Images

Request images using natural language descriptions:

import { Image } from 'assets-ai';

function MyComponent() {
  return (
    <Image 
      description="sunset over mountains" 
      width={800} 
      height={600}
      alt="Beautiful sunset landscape"
    />
  );
}

Static Images

Serve pre-existing images without AI:

<Image name="hero-banner.jpg" width={1200} height={600} alt="Hero banner" />

Props

Prop	Type	Default	Description
`description`	string	-	AI prompt for generating the image
`name`	string	-	Static image filename (bypasses AI)
`width`	number \| string	-	Image width in pixels
`height`	number \| string	-	Image height in pixels
`alt`	string	-	Alternative text for accessibility (required)
`className`	string	-	Additional CSS classes
`fallback`	boolean \| ReactNode	-	Show skeleton loader or custom fallback

Sizing

Fixed Dimensions

<Image 
  description="product photo" 
  width={400} 
  height={300}
  alt="Product"
/>

Responsive Sizing

<Image 
  description="hero banner" 
  width="100%" 
  height="auto"
  alt="Hero"
  className="max-w-4xl"
/>

Aspect Ratio Control

<div className="aspect-video w-full">
  <Image 
    description="landscape photo" 
    width="100%" 
    height="100%"
    alt="Landscape"
    className="object-cover"
  />
</div>

Loading States

Default Loading

By default, an empty space is shown while loading:

<Image 
  description="sunset" 
  width={800} 
  height={600}
  alt="Sunset"
/>

Skeleton Loader

Show a skeleton placeholder while loading:

<Image 
  description="sunset" 
  width={800} 
  height={600}
  alt="Sunset"
  fallback={true}
/>

Custom Fallback

Provide a custom fallback component:

<Image 
  description="sunset" 
  width={800} 
  height={600}
  alt="Sunset"
  fallback={
    <div className="animate-pulse bg-gray-200">
      Loading...
    </div>
  }
/>

Examples

Hero Section

function Hero() {
  return (
    <section className="relative">
      <Image 
        description="modern office workspace" 
        width={1920} 
        height={1080}
        alt="Office workspace"
        className="w-full h-96 object-cover"
        fallback={true}
      />
      <div className="absolute inset-0 flex items-center justify-center">
        <h1 className="text-4xl font-bold text-white">Welcome</h1>
      </div>
    </section>
  );
}

Product Gallery

function ProductGallery({ products }) {
  return (
    <div className="grid grid-cols-3 gap-4">
      {products.map((product) => (
        <Image 
          key={product.id}
          description={product.description}
          width={300}
          height={300}
          alt={product.name}
          className="rounded-lg shadow-lg"
          fallback={true}
        />
      ))}
    </div>
  );
}

Blog Post Featured Image

function BlogPost({ post }) {
  return (
    <article>
      <Image 
        description={post.imageDescription}
        width={800}
        height={450}
        alt={post.title}
        className="w-full rounded-lg mb-8"
        fallback={true}
      />
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

Avatar with Fallback

function UserAvatar({ user }) {
  return (
    <div className="relative w-24 h-24">
      <Image 
        description={`${user.name} profile picture`}
        width={96}
        height={96}
        alt={user.name}
        className="rounded-full object-cover"
        fallback={
          <div className="w-24 h-24 rounded-full bg-blue-500 flex items-center justify-center text-white text-2xl">
            {user.name[0]}
          </div>
        }
      />
    </div>
  );
}

Background Images

function Section() {
  return (
    <div className="relative min-h-screen">
      <div className="absolute inset-0 z-0">
        <Image 
          description="abstract gradient background"
          width="100%"
          height="100%"
          alt="Background"
          className="w-full h-full object-cover opacity-20"
        />
      </div>
      <div className="relative z-10">
        {/* Content */}
      </div>
    </div>
  );
}

Image Grid

function ImageGrid() {
  const images = [
    "mountain landscape",
    "ocean waves",
    "forest path",
    "city skyline",
    "desert sunset",
    "northern lights"
  ];

  return (
    <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
      {images.map((description, index) => (
        <Image 
          key={index}
          description={description}
          width={400}
          height={300}
          alt={description}
          className="w-full h-full object-cover rounded"
          fallback={true}
        />
      ))}
    </div>
  );
}

Best Practices

Descriptive Prompts

Use detailed, specific descriptions for better results:

// Good - specific and descriptive
<Image description="modern minimalist living room with natural light" />
<Image description="professional headshot white background" />
<Image description="fresh vegetables on wooden table" />

// Less effective - too vague
<Image description="room" />
<Image description="photo" />
<Image description="food" />

Always Provide Alt Text

Alt text is essential for accessibility and SEO:

<Image 
  description="team collaboration meeting"
  width={800}
  height={600}
  alt="Team members collaborating in a meeting room"
/>

Optimize Dimensions

Request appropriate sizes for your use case:

// Thumbnail
<Image description="product" width={150} height={150} alt="Product thumbnail" />

// Card image
<Image description="product" width={400} height={300} alt="Product card" />

// Hero image
<Image description="product" width={1920} height={1080} alt="Product hero" />

Use Fallbacks

Always provide fallbacks for better user experience:

<Image 
  description="user profile"
  width={200}
  height={200}
  alt="User profile"
  fallback={true}
/>

Tips for AI Agents

When using Assets AI in AI-generated code:

Be Specific: Use detailed descriptions that include style, composition, and subject matter
Set Dimensions: Always specify width and height for predictable layouts
Add Alt Text: Include meaningful alt text for accessibility
Use Fallbacks: Enable skeleton loaders during development
Consider Context: Match image descriptions to the surrounding content

// AI agent generated example
function AIGeneratedPage() {
  return (
    <div>
      <Image 
        description="modern tech startup office with plants and natural lighting"
        width={1200}
        height={600}
        alt="Office environment"
        className="w-full rounded-lg"
        fallback={true}
      />
      
      <div className="grid grid-cols-3 gap-4 mt-8">
        <Image 
          description="software engineer coding at desk"
          width={400}
          height={300}
          alt="Developer at work"
          fallback={true}
        />
        <Image 
          description="team meeting in conference room"
          width={400}
          height={300}
          alt="Team collaboration"
          fallback={true}
        />
        <Image 
          description="laptop with code on screen"
          width={400}
          height={300}
          alt="Development workspace"
          fallback={true}
        />
      </div>
    </div>
  );
}

Common Use Cases

Marketing Pages

<Image 
  description="happy customers using product"
  width={800}
  height={600}
  alt="Customer testimonials"
/>

E-commerce

<Image 
  description="product on white background"
  width={500}
  height={500}
  alt="Product name"
/>

Blog & Content

<Image 
  description="topic-related illustration"
  width={800}
  height={450}
  alt="Article illustration"
/>

Portfolio

<Image 
  description="project screenshot mockup"
  width={1200}
  height={800}
  alt="Project showcase"
/>

On this page