On this page

Image

---
import pricingImage from "@/assets/images/pricing-9.jpg";
import { Image } from "@/components/starwind/image";
---

<Image src={pricingImage} alt="Pricing illustration" class="rounded-lg" />

Installation

pnpx starwind@latest add image

npx starwind@latest add image

yarn dlx starwind@latest add image

Framework Availability

Astro Available React Framework native

Image is available for Astro. React should use a framework-native equivalent.

React: React projects should use the framework or app router image primitive instead.

Usage

General Notes

The Image component is a thin wrapper around Astro’s built-in <Image /> component. It provides:

Automatic size inference: inferSize is enabled by default, so you don’t need to specify width and height for remote images
Responsive defaults: Images are set to w-full h-auto for responsive behavior
Optimized output: Leverages Astro’s image optimization pipeline

Remote URL

You can use remote URLs directly. For deterministic builds, provide dimensions and disable remote size inference.

---
import { Image } from "@/components/starwind/image";
---

<Image
  src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
  alt="Sleek gray design"
  width={800}
  height={533}
  inferSize={false}
  class="rounded-lg"
/>

Runtime example adjustment

This remote example supplies width and height with inferSize={false}, and the docs site does not authorize its host for Astro image optimization. The browser loads the image directly, so documentation builds do not depend on the remote image host. Authorize the host in Astro only when build-time optimization is required.

API Reference

Styled Component API

These props are added or materially changed by the installed Astro styled component. Standard HTML attributes remain available through the inherited interfaces noted below. Follow the Primitive and Runtime links for lower-level behavior props.

Image

Inherits Partial<import("astro/types").ComponentProps<typeof AstroImage>>.

Contains the following additional props:

Prop Type Default

inferSize boolean true

Description: Infers missing image dimensions from the source when possible.
Classification: Wrapper prop

Changelog

v1.1.0

Moved Image to contract-generated Astro registry output while preserving its astro:assets integration; Image remains Astro-only.

v1.0.2

Refactor tailwind variants functions into separate variants.ts file

v1.0.0

Initial release with starwind v1.13.0