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

<AgentInstructions>

## Submitting Feedback

If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:

POST https://docs.ton.org/feedback

```json
{
  "path": "/contribute/snippets/image",
  "feedback": "Description of the issue"
}
```

Only submit feedback when you have something specific and actionable to report.

</AgentInstructions>

# Image component

export const Image = ({src, darkSrc, alt = '', darkAlt, href, target, height = 342, width = 608, noZoom = false, center = false}) => {
  const isSVG = src.match(/\.svg(?:[#?].*?)?$/i) !== null;
  const shouldInvert = isSVG && !darkSrc;
  const shouldCreateLink = href !== undefined;
  const minPx = 9;
  const maxPx = 608;
  const expectedPx = `a number or a string with a number that is greater than ${minPx - 1} and less than or equal to ${maxPx}`;
  const createInvalidPropCallout = (title, received, expected) => {
    return <Danger>
        <span className="font-bold">
          Invalid <code>{title.toString()}</code> passed!
        </span>
        <br />
        <span className="font-bold">Received: </span>
        {received.toString()}
        <br />
        <span className="font-bold">Expected: </span>
        {expected.toString()}
        {}
      </Danger>;
  };
  const checkValidDimensionValue = value => {
    switch (typeof value) {
      case "string":
      case "number":
        const num = Number(value);
        return Number.isSafeInteger(num) && num >= minPx && num <= maxPx;
      default:
        return false;
    }
  };
  let callouts = [];
  if (height && !checkValidDimensionValue(height)) {
    callouts.push(createInvalidPropCallout("height", height, expectedPx));
  }
  if (width && !checkValidDimensionValue(width)) {
    callouts.push(createInvalidPropCallout("width", width, expectedPx));
  }
  if (callouts.length !== 0) {
    return callouts;
  }
  const heightPx = Number(height);
  const widthPx = Number(width);
  const shouldCenter = center === "true" || center === true ? true : false;
  const shouldNotZoom = noZoom === "true" || noZoom === true ? true : false;
  const images = <>
      <img className="block dark:hidden" src={src} alt={alt} {...height && ({
    height: heightPx
  })} {...width && ({
    width: widthPx
  })} {...(shouldCreateLink || shouldInvert || shouldNotZoom) && ({
    noZoom: "true"
  })} />
      <img className={`hidden dark:block ${shouldInvert ? "invert" : ""}`} src={darkSrc ?? src} alt={darkAlt ?? alt} {...height && ({
    height: heightPx
  })} {...width && ({
    width: widthPx
  })} {...(shouldCreateLink || shouldInvert || shouldNotZoom) && ({
    noZoom: "true"
  })} />
    </>;
  if (shouldCreateLink) {
    if (shouldCenter) {
      return <div style={{
        display: "flex",
        justifyContent: "center"
      }}>
          <a href={href} target={target ?? "_self"}>
            {images}
          </a>
        </div>;
    }
    return <a href={href} target={target ?? "_self"}>
        {images}
      </a>;
  }
  if (shouldCenter) {
    return <div style={{
      display: "flex",
      justifyContent: "center"
    }}>{images}</div>;
  }
  return images;
};

export const Aside = ({type = "note", title = "", icon = "", iconType = "regular", children}) => {
  const asideVariants = ["note", "tip", "caution", "danger"];
  const asideComponents = {
    note: {
      outerStyle: "border-sky-500/20 bg-sky-50/50 dark:border-sky-500/30 dark:bg-sky-500/10",
      innerStyle: "text-sky-900 dark:text-sky-200",
      calloutType: "note",
      icon: <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg" className="w-4 h-4 text-sky-500" aria-label="Note">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M7 1.3C10.14 1.3 12.7 3.86 12.7 7C12.7 10.14 10.14 12.7 7 12.7C5.48908 12.6974 4.0408 12.096 2.97241 11.0276C1.90403 9.9592 1.30264 8.51092 1.3 7C1.3 3.86 3.86 1.3 7 1.3ZM7 0C3.14 0 0 3.14 0 7C0 10.86 3.14 14 7 14C10.86 14 14 10.86 14 7C14 3.14 10.86 0 7 0ZM8 3H6V8H8V3ZM8 9H6V11H8V9Z"></path>
        </svg>
    },
    tip: {
      outerStyle: "border-emerald-500/20 bg-emerald-50/50 dark:border-emerald-500/30 dark:bg-emerald-500/10",
      innerStyle: "text-emerald-900 dark:text-emerald-200",
      calloutType: "tip",
      icon: <svg width="11" height="14" viewBox="0 0 11 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg" className="text-emerald-600 dark:text-emerald-400/80 w-3.5 h-auto" aria-label="Tip">
          <path d="M3.12794 12.4232C3.12794 12.5954 3.1776 12.7634 3.27244 12.907L3.74114 13.6095C3.88471 13.8248 4.21067 14 4.46964 14H6.15606C6.41415 14 6.74017 13.825 6.88373 13.6095L7.3508 12.9073C7.43114 12.7859 7.49705 12.569 7.49705 12.4232L7.50055 11.3513H3.12521L3.12794 12.4232ZM5.31288 0C2.52414 0.00875889 0.5 2.26889 0.5 4.78826C0.5 6.00188 0.949566 7.10829 1.69119 7.95492C2.14321 8.47011 2.84901 9.54727 3.11919 10.4557C3.12005 10.4625 3.12175 10.4698 3.12261 10.4771H7.50342C7.50427 10.4698 7.50598 10.463 7.50684 10.4557C7.77688 9.54727 8.48281 8.47011 8.93484 7.95492C9.67728 7.13181 10.1258 6.02703 10.1258 4.78826C10.1258 2.15486 7.9709 0.000106649 5.31288 0ZM7.94902 7.11267C7.52078 7.60079 6.99082 8.37878 6.6077 9.18794H4.02051C3.63739 8.37878 3.10743 7.60079 2.67947 7.11294C2.11997 6.47551 1.8126 5.63599 1.8126 4.78826C1.8126 3.09829 3.12794 1.31944 5.28827 1.3126C7.2435 1.3126 8.81315 2.88226 8.81315 4.78826C8.81315 5.63599 8.50688 6.47551 7.94902 7.11267ZM4.87534 2.18767C3.66939 2.18767 2.68767 3.16939 2.68767 4.37534C2.68767 4.61719 2.88336 4.81288 3.12521 4.81288C3.36705 4.81288 3.56274 4.61599 3.56274 4.37534C3.56274 3.6515 4.1515 3.06274 4.87534 3.06274C5.11719 3.06274 5.31288 2.86727 5.31288 2.62548C5.31288 2.38369 5.11599 2.18767 4.87534 2.18767Z"></path>
        </svg>
    },
    caution: {
      outerStyle: "border-amber-500/20 bg-amber-50/50 dark:border-amber-500/30 dark:bg-amber-500/10",
      innerStyle: "text-amber-900 dark:text-amber-200",
      calloutType: "warning",
      icon: <svg className="flex-none w-5 h-5 text-amber-400 dark:text-amber-300/80" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-label="Warning">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
        </svg>
    },
    danger: {
      outerStyle: "border-red-500/20 bg-red-50/50 dark:border-red-500/30 dark:bg-red-500/10",
      innerStyle: "text-red-900 dark:text-red-200",
      calloutType: "danger",
      icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor" className="text-red-600 dark:text-red-400/80 w-4 h-4" aria-label="Danger">
          <path d="M17.1 292c-12.9-22.3-12.9-49.7 0-72L105.4 67.1c12.9-22.3 36.6-36 62.4-36l176.6 0c25.7 0 49.5 13.7 62.4 36L494.9 220c12.9 22.3 12.9 49.7 0 72L406.6 444.9c-12.9 22.3-36.6 36-62.4 36l-176.6 0c-25.7 0-49.5-13.7-62.4-36L17.1 292zm41.6-48c-4.3 7.4-4.3 16.6 0 24l88.3 152.9c4.3 7.4 12.2 12 20.8 12l176.6 0c8.6 0 16.5-4.6 20.8-12L453.4 268c4.3-7.4 4.3-16.6 0-24L365.1 91.1c-4.3-7.4-12.2-12-20.8-12l-176.6 0c-8.6 0-16.5 4.6-20.8 12L58.6 244zM256 128c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"></path>
        </svg>
    }
  };
  let variant = type;
  let gotInvalidVariant = false;
  if (!asideVariants.includes(type)) {
    gotInvalidVariant = true;
    variant = "danger";
  }
  const iconVariants = ["regular", "solid", "light", "thin", "sharp-solid", "duotone", "brands"];
  if (!iconVariants.includes(iconType)) {
    iconType = "regular";
  }
  return <>
      <div className={`callout my-4 px-5 py-4 overflow-hidden rounded-2xl flex gap-3 border ${asideComponents[variant].outerStyle}`} data-callout-type={asideComponents[variant].calloutType}>
        <div className="mt-0.5 w-4" data-component-part="callout-icon">
          {}
          {icon === "" ? asideComponents[variant].icon : <Icon icon={icon} iconType={iconType} size={14} />}
        </div>
        <div className={`text-sm prose min-w-0 w-full ${asideComponents[variant].innerStyle}`} data-component-part="callout-content">
          {gotInvalidVariant ? <p>
              <span className="font-bold">
                Invalid <code>type</code> passed!
              </span>
              <br />
              <span className="font-bold">Received: </span>
              {type}
              <br />
              <span className="font-bold">Expected one of: </span>
              {asideVariants.join(", ")}
            </p> : <>
              {title && <p className="font-bold">{title}</p>}
              {children}
            </>}
        </div>
      </div>
    </>;
};

To display an image, use the `<Image>` component. It allows displaying either a single image for all themes ([`src`](#src)) or one image per light theme (`src`) and one image for the dark theme ([`darkSrc`](#darksrc)).

<Aside>
  When an `src` path points to the SVG image and there is no [`darkSrc`](#darksrc) alternative, image colors will be inverted in the dark theme.
</Aside>

Additionally, you can specify the [`href`](#href) property, making an image double as a clickable link. When doing so, the [`target`](#href) property allows to change the browsing context of the link.

<Aside>
  Making an image into a clickable link disables image zoom capabilities.
</Aside>

Finally, to adjust image dimensions in pixels, use [`height`](#height) or [`width`](#width) properties. By default, all images use 16:9 aspect ratio and set `height` to 342px and `width` to 608px.

## Import

```tsx theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
import { Image } from '/snippets/image.jsx';
```

## Usage

Show images using the `<Image>` component.

```mdx theme={"theme":{"light":"github-light-default","dark":"dark-plus"},"languages":{"custom":["/resources/grammars/tolk.tmLanguage.json","/resources/grammars/tlb.tmLanguage.json","/resources/grammars/fift.tmLanguage.json","/resources/grammars/tasm.tmLanguage.json","/resources/grammars/func.tmLanguage.json"]}}
import { Image } from '/snippets/image.jsx';

{/* A single image */}
<Image
  src="/resources/images/<IMAGE>"
/>

{/*
  Image with height of 608px (max allowed).
  Its width will be scaled proportionally to set height and vice versa.
*/}
<Image
  src="/resources/images/<IMAGE>"
  height="608"
/>

{/* Image variations for light or dark themes */}
<Image
  src="/resources/images/<IMAGE>"
  darkSrc="/resources/images/<IMAGE_DARK_THEME>"
  />

{/* Image with all properties set */}
<Image
  src="/resources/images/<IMAGE>"
  alt="<ALT_TEXT>"
  darkSrc="/resources/images/<IMAGE_DARK_THEME>"
  darkAlt="<ALT_TEXT_DARK_THEME>"
  href="<CLICKABLE_LINK>"
  target="_blank"
  height="100"
  width={120 + 120}
  />
```

## `<Image>` props

**Implementation:** [`image.jsx`](https://github.com/ton-org/docs/blob/main/snippets/image.jsx)

The `<Image>` component accepts the following props:

### `src` (required)

**type:** `string`

The image file URL. The file path should be given either relative to the current `.mdx` file's location or absolute, assuming the root of the documentation repository is the `/` directory.

<Aside type="caution">
  Relative links should **NOT** use `..` in their paths to avoid discovery or security issues.
</Aside>

<Aside>
  Image files must be less than 20 MB uncompressed. For larger files, host them on a CDN service like Amazon S3.
</Aside>

Examples:

* `<Image src="<IMAGE>" />` — relative path to an image placed in the same folder as the current `.mdx` file.
* `<Image src="/resources/images/<IMAGE>" />` — absolute path to an image in the `resources/images/` sub-folder.

### `alt`

**type:** `string` <br />
**default:** `""`

The textual replacement for the image. It is mandatory and incredibly useful for accessibility — screen readers read the attribute value out to their users so they know what the image means. Alt text is also displayed on the page if the image can't be loaded for any reason, such as network errors, content blocking, or [link rot](https://en.wikipedia.org/wiki/Link_rot).

Setting this attribute to an empty string (`alt=""`) indicates that this image is not a key part of the content (it's decoration or a tracking pixel), and that non-visual browsers may omit it from rendering. Visual browsers will also hide the broken image icon if the alt attribute is empty and the image failed to display.

This attribute is also used when copying and pasting the image to text, or saving a linked image to a bookmark.

See more: [`alt` attribute on the `<img>` image embed element, MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#alt).

### `darkSrc`

<Aside>
  The value of this property is ignored unless the [`src` property](#src) is set.
</Aside>

**type:** `string` <br />
**default:** [`src`](#src) value

Similar to the [`src` property](#src), but specifies the image file URL for the dark theme only.

### `darkAlt`

<Aside>
  The value of this property is ignored unless the [`darkSrc` property](#darksrc) is set.
</Aside>

**type:** `string` <br />
**default:** [`alt`](#alt) value

Similar to the [`alt` property](#alt), but specifies the image file URL for the dark theme only.

### `href`

**type:** `string`

The `<a>` anchor element wraps the image, making it clickable. The `href` property is a URL that the clickable image hyperlink points to.

See more: [`href` attribute on the `<a>` anchor element, MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#href).

### `target`

<Aside>
  The value of this property is ignored unless the [`href` property](#href) is set.
</Aside>

**type:** `"_self" | "_blank" | "_parent" | "_top" | "_unfencedTop"` <br />
**default:** `"_self"`

The `<a>` anchor element wraps the image, making it clickable. The `target` property specifies where to display the linked URL, as the name for a browsing context (a tab, window, or [`<iframe>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe)).

The following types have special meanings for where to load the URL:

* `_self`: the current browsing context. (Default)
* `_blank`: usually a new tab, but users can configure browsers to open a new window instead.
* `_parent`: the parent browsing context of the current one. If there is no parent, behaves as `_self`.
* `_top`: the topmost browsing context, i.e., the "highest" context that's an ancestor of the current one. If there are no ancestors, behaves as `_self`.
* `_unfencedTop`: allows embedded [fenced frames](https://developer.mozilla.org/en-US/docs/Web/API/Fenced_frame_API) to navigate the top-level frame.

See more: [`target` attribute on the `<a>` anchor element, MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#target).

### `height`

**type:** `string | number` <br />
**default:** `342` (pixels)

The intrinsic height of the image, in pixels. Must be specified without a unit and be within the inclusive range from 9 to 608.

If the [`width`](#width) property is not set, then the width of the image is adjusted according to the current aspect ratio in respect to the new set `height`.

Examples:

* `<Image src="<IMAGE>" height="100" />` — height of 100 pixels given in a string.
* `<Image src="<IMAGE>" height={50 + 50} />` — also the height of 100 pixels, but given as a number.

See more: [`height` attribute on the `<img>` image embed element, MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#height).

### `width`

**type:** `string | number` <br />
**default:** `608` (pixels)

The intrinsic width of the image, in pixels. Must be specified without a unit and be within the inclusive range from 9 to 608.

If the [`height`](#height) property is not set, then the height of the image is adjusted according to the current aspect ratio in respect to the new set `width`.

Examples:

* `<Image src="<IMAGE>" width="100" />` — width of 100 pixels given in a string.
* `<Image src="<IMAGE>" width={50 + 50} />` — also the width of 100 pixels, but given as a number.

See more: [`width` attribute on the `<img>` image embed element, MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#width).

### `center`

**type:** `boolean` <br />
**default:** `false`

Whether to horizontally center the image.

Usage: `<Image src="<IMAGE>" center={true}/>`.

### `noZoom`

**type:** `boolean` <br />
**default:** `false`

Whether to disable the image zoom.

Usage: `<Image src="<IMAGE>" noZoom={true}/>`.