StaticImage

Description

A wrapper around the Image component specifically designed for rendering static images from your theme's public folder or the application's public assets. Automatically resolves the correct path based on the active theme and base URL.

Import

import { StaticImage } from '@components/common/StaticImage';

Usage

import { StaticImage } from '@components/common/StaticImage';

function Logo() {
  return (
    <StaticImage
      subPath="logo.png"
      width={200}
      height={60}
      alt="Company Logo"
    />
  );
}

Props

Name	Type	Default	Description
subPath	string	-	Path relative to /assets/ folder (required)
width	number	-	Intrinsic width of the image (required)
height	number	-	Intrinsic height of the image (required)
alt	string	-	Alternative text for accessibility (required)
quality	number	75	Image quality (0-100)
loading	'eager' | 'lazy'	'eager'	Loading strategy
objectFit	'contain' | 'cover' | 'fill' | 'none' | 'scale-down' | 'unset'	'unset'	CSS object-fit property
priority	boolean	false	Marks image for preloading
sizes	string	'100vw'	Responsive sizes attribute

All other props from the Image component are also supported.

Example: Logo

import { StaticImage } from '@components/common/StaticImage';

function Header() {
  return (
    <header>
      <StaticImage
        subPath="logo.svg"
        width={180}
        height={50}
        alt="EverShop Logo"
        priority={true}
      />
    </header>
  );
}

Example: Theme Icon

import { StaticImage } from '@components/common/StaticImage';

function SocialLinks() {
  return (
    <div className="social-icons">
      <a href="https://facebook.com">
        <StaticImage
          subPath="icons/facebook.svg"
          width={32}
          height={32}
          alt="Facebook"
        />
      </a>
      <a href="https://twitter.com">
        <StaticImage
          subPath="icons/twitter.svg"
          width={32}
          height={32}
          alt="Twitter"
        />
      </a>
    </div>
  );
}

Example: Banner Image

import { StaticImage } from '@components/common/StaticImage';

function PromoBanner() {
  return (
    <div className="promo-banner">
      <StaticImage
        subPath="banners/summer-sale.jpg"
        width={1200}
        height={400}
        alt="Summer Sale - Up to 50% Off"
        quality={85}
        objectFit="cover"
        sizes="100vw"
      />
    </div>
  );
}

Example: Placeholder Image

import { StaticImage } from '@components/common/StaticImage';

function ProductPlaceholder() {
  return (
    <StaticImage
      subPath="placeholder/product.png"
      width={400}
      height={400}
      alt="Product image placeholder"
      loading="lazy"
    />
  );
}

Example: Background Pattern

import { StaticImage } from '@components/common/StaticImage';

function DecorativeSection() {
  return (
    <div className="relative">
      <StaticImage
        subPath="patterns/dots.svg"
        width={800}
        height={600}
        alt=""
        quality={60}
        className="absolute inset-0 opacity-10"
      />
      <div className="relative z-10">
        <h2>Content here</h2>
      </div>
    </div>
  );
}

File Organization

Place static images in your theme's public folder:

themes/
  your-theme/
    public/
      logo.png
      icons/
        facebook.svg
        twitter.svg
      banners/
        hero.jpg
      patterns/
        dots.svg
      placeholder/
        product.png
        

Then reference them with subPath:

<StaticImage subPath="logo.png" />
<StaticImage subPath="icons/facebook.svg" />
<StaticImage subPath="banners/hero.jpg" />

See Also

• Static Assets Management - Guide on managing static assets

Related Components

• Image - Base image component with optimization
• Area - Component container system
• useAppState - Access app context data