# Image component (https://docs-fpm2731fy-ton-core-docs.vercel.app/llms/contribute/snippets/image/content.md)



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

<Callout>
  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.
</Callout>

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

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

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 [#import]

Does not require an explicit import — implicitly imported in all `.mdx` files automatically.

## Usage [#usage]

Show images using the `<Image>` component.

```mdx

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

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

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

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

## `<Image>` props [#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) [#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.

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

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

Examples:

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

### `alt` [#alt]

**type:** `string` <br />
&#x2A;*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` [#darksrc]

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

**type:** `string` <br />
&#x2A;*default:** [`src`](#src-required) value

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

### `darkAlt` [#darkalt]

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

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

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

### `href` [#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` [#target]

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

**type:** `"_self" | "_blank" | "_parent" | "_top" | "_unfencedTop"` <br />
&#x2A;*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` [#height]

**type:** `string | number` <br />
&#x2A;*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` [#width]

**type:** `string | number` <br />
&#x2A;*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` [#center]

**type:** `boolean` <br />
&#x2A;*default:** `false`

Whether to horizontally center the image.

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

### `noZoom` [#nozoom]

**type:** `boolean` <br />
&#x2A;*default:** `false`

Whether to disable the image zoom.

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