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

# Image

> Adds an Image panel in the Makeswift builder to visually edit an image prop.

<Frame type="glass" caption="An image panel on a feature card component to pick an icon">
  <img src="https://mintcdn.com/makeswift/AOijlpVp0npNQ8wB/images/image-panel.png?fit=max&auto=format&n=AOijlpVp0npNQ8wB&q=85&s=5e600181edc11beb3e064b3c8c416a81" width="1024" height="640" data-path="images/image-panel.png" />
</Frame>

Clicking "Choose" opens the Makeswift files manager, where you can upload an image or select an existing one from your media library.

<Frame type="glass" caption="The Makeswift files manager">
  <img src="https://mintcdn.com/makeswift/AOijlpVp0npNQ8wB/images/image-panel-picker.png?fit=max&auto=format&n=AOijlpVp0npNQ8wB&q=85&s=4a04cc34962bdcf3b3d467924690f632" width="1024" height="640" data-path="images/image-panel-picker.png" />
</Frame>

## Params

<ParamField query="label" type="string" default="Image">
  Text for the panel label in the Makeswift builder.
</ParamField>

<ParamField query="description" type="string">
  The description shown in the Panel of the Makeswift builder. This can be written in Markdown format.
  Added in [`v0.24.8`](https://github.com/makeswift/makeswift/releases/tag/%40makeswift%2Fruntime%400.24.8).
</ParamField>

<ParamField query="format" type="Image.Format.URL | Image.Format.WithDimensions" default="Image.Format.URL">
  Changes the prop type this component receives. If set to `Image.Format.URL`, your component receives a `string` value of the image url. If set to `Image.Format.WithDimensions`, your component receives an object of type `ImageWithDimensions`. This format is useful when using components like [`next/image`](https://nextjs.org/docs/pages/api-reference/components/image) that require you to pass the image dimensions as props.

  ```ts theme={null}
  type ImageWithDimensions = {
    url: string;
    dimensions: {
      width: number;
      height: number;
    };
  };
  ```
</ParamField>

## Prop type

If `format` is set to `Image.Format.URL`, the prop type is `string`.

If `format` is set to `Image.Format.WithDimensions`, the prop type is `ImageWithDimensions`.

## Example

The following examples adds an Image control to the `icon` prop of a Feature Card component.

### Using `Image.Format.URL`

<CodeGroup>
  ```tsx FeatureCard.makeswift.ts theme={null}
  import { Image } from "@makeswift/runtime/controls";

  import { runtime } from "@/makeswift/runtime";

  import { FeatureCard } from "./FeatureCard";

  runtime.registerComponent(FeatureCard, {
    type: "feature-card",
    label: "Feature Card",
    props: {
      icon: ImageControl({
        label: "icon",
        format: Image.Format.URL,
      }),
    },
  });
  ```

  ```tsx FeatureCard.tsx theme={null}
  interface Props {
    icon?: string;
  }

  function FeatureCard({ icon = "./default-icon.svg" }: Props) {
    return (
      <div className="p-4 rounded shadow">
        <img src={icon} />
      </div>
    );
  }
  ```
</CodeGroup>

### Using `Image.Format.WithDimensions`

<CodeGroup>
  ```tsx FeatureCard.makeswift.ts theme={null}
  import { Image } from "@makeswift/runtime/controls";
  import { runtime } from "@/lib/makeswift/runtime";

  import { FeatureCard } from "./FeatureCard";

  runtime.registerComponent(FeatureCard, {
    type: "feature-card",
    label: "FeatureCard",
    props: {
      icon: Image({
        label: "icon",
        format: Image.Format.WithDimensions,
      }),
    },
  });
  ```

  ```tsx FeatureCard.tsx theme={null}
  import Image from "next/image";

  interface Props {
    icon?: {
      url: string;
      dimensions: {
        width: number;
        height: number;
      };
    };
  }

  const defaultIcon = {
    url: "/default-icon.png",
    dimensions: {
      width: 100,
      height: 100,
    },
  };

  function FeatureCard({ icon = defaultIcon }: Props) {
    return (
      <div className="p-4 rounded shadow">
        <Image
          src={icon.url}
          width={icon.dimensions.width}
          height={icon.dimensions.height}
        />
      </div>
    );
  }
  ```
</CodeGroup>

<Info>
  `.makeswift.ts` is a naming convention for organizing Makeswift registration
  code. [Learn
  more](/developer/reference/runtime/register-component#organizing-registration-code).
</Info>