> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stac.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Image

> Documentation for Image

export const PLAYGROUND_BASE_URL = "https://playground.stac.dev/";

export const imagePreviewJson = {
  "type": "image",
  "src": "assets/logo.png",
  "imageType": "asset",
  "width": 200,
  "height": 100,
  "fit": "cover"
};
export const imagePreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

The `Image` widget allows you to display an image in your Flutter app using JSON. It supports images from multiple sources, including assets, files, and network URLs, and provides customization options such as alignment, color, width, height, and fit.

To learn more about the equivalent Flutter widgets and their properties, refer to the [official Flutter documentation for Image](https://api.flutter.dev/flutter/widgets/Image-class.html).

## Properties

| Property               | Type                | Description                                                               |
| ---------------------- | ------------------- | ------------------------------------------------------------------------- |
| `src`                  | `String`            | The source path or URL of the image to display.                           |
| `alignment`            | `StacAlignment`     | How to align the image within its bounds.                                 |
| `imageType`            | `StacImageType`     | The type of image source: `asset`, `network`, or `file`.                  |
| `color`                | `StacColor`         | A color filter to apply to the image.                                     |
| `width`                | `double`            | The width of the image in logical pixels.                                 |
| `height`               | `double`            | The height of the image in logical pixels.                                |
| `fit`                  | `StacBoxFit`        | How the image should be inscribed into the space allocated during layout. |
| `repeat`               | `StacImageRepeat`   | How the image should be repeated if it doesn't fill its layout bounds.    |
| `filterQuality`        | `StacFilterQuality` | The quality level for image filtering operations.                         |
| `semanticLabel`        | `String`            | A semantic description of the image for accessibility.                    |
| `excludeFromSemantics` | `bool`              | Whether to exclude this image from semantics.                             |

## Constructors

### StacImage.asset

Creates an image widget that loads from Flutter's asset bundle.

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    const StacImage.asset(
      'assets/logo.png',
      width: 200,
      height: 100,
      fit: StacBoxFit.cover,
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "image",
      "src": "assets/logo.png",
      "imageType": "asset",
      "width": 200,
      "height": 100,
      "fit": "cover"
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe
        id="stac"
        src={imagePreviewSrc}
        title="Stac Playground"
        className="w-full rounded-xl border-0"
        style={{ height: "640px" }}
        loading="lazy"
        onLoad={(event) => {
      const iframe = event.currentTarget;
      const targetOrigin = PLAYGROUND_BASE_URL;
      const message = {
        type: "stac-preview-json",
        payload: imagePreviewJson
      };

      let attempts = 0;
      const maxAttempts = 12;
      const interval = setInterval(() => {
        iframe.contentWindow?.postMessage(message, targetOrigin);
        attempts += 1;

        if (attempts >= maxAttempts) {
          clearInterval(interval);
        }
      }, 250);
    }}
      />
    </Frame>
  </Tab>
</Tabs>

***

### StacImage.network

Creates an image widget that loads from a network URL.

<CodeGroup>
  ```dart Dart theme={null}
  const StacImage.network(
    'https://example.com/image.png',
    width: 200,
    height: 100,
    fit: StacBoxFit.contain,
  )
  ```

  ```json JSON theme={null}
  {
    "type": "image",
    "src": "https://example.com/image.png",
    "imageType": "network",
    "width": 200,
    "height": 100,
    "fit": "contain"
  }
  ```
</CodeGroup>

***

### StacImage.file

Creates an image widget that loads from a local file path.

<CodeGroup>
  ```dart Dart theme={null}
  const StacImage.file(
    '/path/to/image.png',
    width: 200,
    height: 100,
  )
  ```

  ```json JSON theme={null}
  {
    "type": "image",
    "src": "/path/to/image.png",
    "imageType": "file",
    "width": 200,
    "height": 100
  }
  ```
</CodeGroup>

***

### StacImage (Default)

The default constructor allows you to specify any image source with the `imageType` property.

<CodeGroup>
  ```dart Dart theme={null}
  const StacImage(
    src: 'assets/logo.png',
    width: 200,
    height: 100,
    fit: StacBoxFit.cover,
  )
  ```

  ```json JSON theme={null}
  {
    "type": "image",
    "src": "assets/logo.png",
    "width": 200,
    "height": 100,
    "fit": "cover"
  }
  ```
</CodeGroup>