Skip to Content
Dashflow Logo

Img Component

A comprehensive guide to using the Img component with examples, props, and best practices.

Overview

The Img component provides a styled image element with consistent styling and accessibility features. It's designed to be responsive and accessible by default.

Basic Usage

import { Img } from '@dashflowx/core'


export default function ImgExample() {
  return (
    <Img 
      src="https://example.com/image.jpg"
      alt="Description of the image"
    />
  )
}

Preview:

Sample image

Props

PropTypeDefaultDescription
srcstring-The image source URL
altstring-Alternative text for accessibility
classNamestring''Additional CSS classes for the image

Examples

Basic Image

import { Img } from '@dashflowx/core'


export default function BasicImg() {
  return (
    <Img 
      src="https://picsum.photos/400/300"
      alt="Random placeholder image"
    />
  )
}

Preview:

Random placeholder image

Styled Image

import { Img } from '@dashflowx/core'


export default function StyledImg() {
  return (
    <Img 
      src="https://picsum.photos/400/300"
      alt="Styled image"
      className="border-4 border-blue-500 shadow-lg"
    />
  )
}

Preview:

Styled image

Responsive Image

import { Img } from '@dashflowx/core'


export default function ResponsiveImg() {
  return (
    <Img 
      src="https://picsum.photos/800/600"
      alt="Responsive image"
      className="w-full h-auto max-w-md mx-auto"
    />
  )
}

Preview:

Responsive image

Circular Image

import { Img } from '@dashflowx/core'


export default function CircularImg() {
  return (
    <Img 
      src="https://picsum.photos/200/200"
      alt="Circular image"
      className="rounded-full w-32 h-32 object-cover"
    />
  )
}

Preview:

Circular image

Custom Styled Image

import { Img } from '@dashflowx/core'


export default function CustomStyledImg() {
  return (
    <Img 
      src="https://picsum.photos/500/400"
      alt="Custom styled image"
      className="rounded-xl border-2 border-purple-500 shadow-2xl transform hover:scale-105 transition-transform"
    />
  )
}

Preview:

Custom styled image

Common Use Cases

Profile Picture

const profilePicture = (
  <Img 
    src="/profile.jpg"
    alt="User profile picture"
    className="rounded-full w-24 h-24 object-cover"
  />
);

Product Image

const productImage = (
  <Img 
    src="/product.jpg"
    alt="Product image"
    className="w-full h-64 object-cover rounded-lg"
  />
);

Hero Image

const heroImage = (
  <Img 
    src="/hero.jpg"
    alt="Hero image"
    className="w-full h-96 object-cover"
  />
);

Thumbnail Image

const thumbnailImage = (
  <Img 
    src="/thumbnail.jpg"
    alt="Thumbnail"
    className="w-20 h-20 object-cover rounded"
  />
);
const galleryImage = (
  <Img 
    src="/gallery.jpg"
    alt="Gallery image"
    className="w-full h-48 object-cover rounded-lg hover:opacity-80 transition-opacity"
  />
);

Best Practices

1. Always Provide Alt Text

Include descriptive alt text for accessibility.

// ✅ Good - Descriptive alt text
<Img src="/product.jpg" alt="Red Nike Air Max running shoes" />


// ❌ Avoid - Missing or generic alt text
<Img src="/product.jpg" alt="Image" />
<Img src="/product.jpg" />

2. Use Appropriate Image Sizes

Optimize images for different screen sizes.

// ✅ Good - Responsive sizing
<Img 
  src="/image.jpg" 
  alt="Description"
  className="w-full h-auto max-w-md"
/>


// ❌ Avoid - Fixed sizes
<Img 
  src="/image.jpg" 
  alt="Description"
  className="w-500 h-300"
/>

3. Optimize Image Loading

Use appropriate loading strategies.

// ✅ Good - Lazy loading for below-fold images
<Img 
  src="/image.jpg" 
  alt="Description"
  loading="lazy"
/>


// ✅ Good - Eager loading for above-fold images
<Img 
  src="/hero.jpg" 
  alt="Description"
  loading="eager"
/>

4. Use Semantic Sizing

Use semantic sizing classes for consistency.

// ✅ Good - Semantic sizing
<Img className="w-full h-64 object-cover" />


// ❌ Avoid - Arbitrary sizing
<Img className="w-347 h-198" />

5. Handle Loading States

Provide fallbacks for loading states.

// ✅ Good - Loading state
const [isLoading, setIsLoading] = useState(true);


<Img 
  src="/image.jpg" 
  alt="Description"
  onLoad={() => setIsLoading(false)}
  className={isLoading ? 'opacity-0' : 'opacity-100'}
/>

Customization

Custom Styling

You can customize the image appearance using CSS classes:

<Img 
  src="/image.jpg" 
  alt="Description"
  className="rounded-lg border-2 border-gray-300 shadow-md"
/>

Different Themes

Use different themes for different contexts:

// Light theme
<Img className="border border-gray-200" />


// Dark theme
<Img className="border border-gray-700" />


// Brand theme
<Img className="border-2 border-blue-500" />

Size Variations

Use different sizes for different purposes:

// Small image
<Img className="w-16 h-16" />


// Medium image
<Img className="w-32 h-32" />


// Large image
<Img className="w-64 h-64" />

Advanced Usage

Image with Fallback

Handle image loading errors gracefully:

const [imageError, setImageError] = useState(false);


<Img 
  src={imageError ? '/fallback.jpg' : '/image.jpg'}
  alt="Description"
  onError={() => setImageError(true)}
/>

Lazy Loading

Implement lazy loading for performance:

<Img 
  src="/image.jpg" 
  alt="Description"
  loading="lazy"
  className="w-full h-auto"
/>

Responsive Images

Use responsive images for different screen sizes:

<Img 
  src="/image-small.jpg"
  alt="Description"
  className="w-full h-auto sm:hidden"
/>
<Img 
  src="/image-large.jpg"
  alt="Description"
  className="w-full h-auto hidden sm:block"
/>

Image with Overlay

Add overlay effects to images:

<div className="relative">
  <Img 
    src="/image.jpg" 
    alt="Description"
    className="w-full h-64 object-cover"
  />
  <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
    <span className="text-white text-xl font-bold">Overlay Text</span>
  </div>
</div>
  • Avatar: For user profile images
  • Card: For image containers
  • Gallery: For image collections
  • Modal: For image lightboxes
  • Carousel: For image sliders

API Reference

For the complete API reference and advanced usage patterns, see the Img API documentation.

Edit this page on GitHub
previousHR