Skip to main content

​
Image

The Image component provides an enhanced way to display images with features like fallback support, loading states, responsive sizing, and overlay effects.

​
Import

import { Image } from '@naturacosmeticos/natds-web';

​
Usage

​
Basic Image

import { Image } from '@naturacosmeticos/natds-web';

function Example() {
  return (
    <Image
      src="/path/to/image.jpg"
      alt="Product image"
      width={300}
      height={200}
    />
  );
}

​
Responsive Image

import { Image } from '@naturacosmeticos/natds-web';

function Example() {
  return (
    <Image
      src="/path/to/image.jpg"
      alt="Responsive image"
      width="100%"
      maxWidth={600}
      height="auto"
    />
  );
}

​
Image with Fallback

Provide a fallback image to display if the main image fails to load: 
import { Image } from '@naturacosmeticos/natds-web';

function Example() {
  return (
    <Image
      src="/path/to/image.jpg"
      fallback="/path/to/fallback.jpg"
      alt="Image with fallback"
      width={300}
      height={200}
    />
  );
}

​
Image with Overlay

Add a semi-transparent overlay to the image: 
import { Image } from '@naturacosmeticos/natds-web';

function Example() {
  return (
    <Image
      src="/path/to/image.jpg"
      alt="Image with overlay"
      width={300}
      height={200}
      state={true}
    />
  );
}

​
Image with Border Radius

import { Image } from '@naturacosmeticos/natds-web';

function Example() {
  return (
    <Image
      src="/path/to/image.jpg"
      alt="Rounded image"
      width={300}
      height={200}
      radius={true}
    />
  );
}

​
Sizing Options

The Image component supports flexible sizing with tokens and pixel values:

​
Fixed Size

import { Image } from '@naturacosmeticos/natds-web';

function Example() {
  return (
    <Image
      src="/path/to/image.jpg"
      alt="Fixed size"
      width={400}
      height={300}
    />
  );
}

​
With Max Dimensions

import { Image } from '@naturacosmeticos/natds-web';

function Example() {
  return (
    <Image
      src="/path/to/image.jpg"
      alt="Constrained size"
      width="100%"
      maxWidth={800}
      height="auto"
      maxHeight={600}
    />
  );
}

​
Auto Dimensions

import { Image } from '@naturacosmeticos/natds-web';

function Example() {
  return (
    <Image
      src="/path/to/image.jpg"
      alt="Auto dimensions"
      width="auto"
      height="auto"
    />
  );
}

​
Disable Selection

Prevent users from selecting or dragging the image: 
import { Image } from '@naturacosmeticos/natds-web';

function Example() {
  return (
    <Image
      src="/path/to/image.jpg"
      alt="Non-selectable image"
      width={300}
      height={200}
      disableSelection={true}
      draggable={false}
    />
  );
}

​
Props

​
ImageProps

​
src
string
required
Image source URL. This is the path to the image file.
​
alt
string
required
Alternative text for the image. Required for accessibility.
​
width
number | string
Image width. Can be a number (pixels), size token, or “auto”.
​
height
number | string
Image height. Can be a number (pixels), size token, or “auto”.
​
maxWidth
number | string
Maximum image width. Prevents the width from exceeding this value.
​
maxHeight
number | string
Maximum image height. Prevents the height from exceeding this value.
​
fallback
string
Fallback image URL to display if the main image fails to load.
​
radius
boolean
If true, applies border-radius of 4px to the image. If false, border-radius is none.
​
state
boolean
If true, adds an overlay to the image. If false, no overlay is applied.
​
disableSelection
boolean
If true, prevents image selection using CSS user-select property.
​
draggable
boolean
Controls whether the image can be dragged.
​
className
string
CSS class name to apply custom styles.
​
style
React.CSSProperties
Inline styles for dynamic styling. Only recommended for dynamic style properties.

​
Common Patterns

​
Product Image Grid

import { Image } from '@naturacosmeticos/natds-web';

function ProductGrid() {
  const products = [
    { id: 1, src: '/product1.jpg', name: 'Product 1' },
    { id: 2, src: '/product2.jpg', name: 'Product 2' },
    { id: 3, src: '/product3.jpg', name: 'Product 3' },
  ];
  
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
      {products.map(product => (
        <Image
          key={product.id}
          src={product.src}
          alt={product.name}
          width="100%"
          height={250}
          radius={true}
          fallback="/placeholder.jpg"
        />
      ))}
    </div>
  );
}

​
Hero Image

import { Image } from '@naturacosmeticos/natds-web';

function Hero() {
  return (
    <Image
      src="/hero-image.jpg"
      alt="Hero banner"
      width="100%"
      maxWidth={1920}
      height={600}
      disableSelection={true}
    />
  );
}

​
Image with Loading State

import { Image } from '@naturacosmeticos/natds-web';
import { useState } from 'react';

function ImageWithLoading() {
  const [loaded, setLoaded] = useState(false);
  
  return (
    <div>
      {!loaded && <div>Loading...</div>}
      <Image
        src="/large-image.jpg"
        alt="Large image"
        width={800}
        height={600}
        onLoad={() => setLoaded(true)}
        style={{ display: loaded ? 'block' : 'none' }}
      />
    </div>
  );
}

​
Accessibility

Always provide meaningful alt text for images: 
// Good
<Image src="product.jpg" alt="Natural beauty cream with organic ingredients" />

// Avoid
<Image src="product.jpg" alt="image" />
<Image src="product.jpg" alt="" /> // Only use empty alt for decorative images

Build docs developers (and LLMs) love

Get started for freeTalk to us