Media

Image

An image that can open a full-screen preview. The preview rotates and zooms the image, zooms with the wheel or a double click, and lets you drag a zoomed image around.

Features5

API

Theming

Basic

Without preview the component renders a plain image with its alt, sizes and lazy loading.

Preview

preview adds a zoom button over the image. The preview has rotate and zoom buttons and closes with Escape, the close button or a click outside the image.

Hover the image and press the eye

10 lines

<tx-image  src="images/gallery/dawn.svg"  alt="Dawn over the ridge"  width="320"  height="213"  preview  (opened)="status.set('Preview open')"  (closed)="status.set('Preview closed')"/><p class="status">{{ status() }}</p>

previewSrc shows another file in the preview, for example a larger one. zoomStep, minZoom and maxZoom set the zoom range; drag a zoomed image to look around and double-click to switch between the normal and the largest scale.

11 lines

<tx-image  src="images/gallery/night.svg"  previewSrc="images/gallery/night.svg"  alt="Night sky"  width="240"  height="160"  preview  [zoomStep]="0.25"  [minZoom]="0.5"  [maxZoom]="3"/>

Templates

txImageIndicator replaces the content of the zoom button. txImagePreview replaces the preview content; its style carries the rotate and zoom transform and close closes the preview.

14 lines

<tx-image src="images/gallery/coast.svg" alt="Quiet coast" width="320" height="213" preview>  <ng-template txImageIndicator>    <span class="indicator"><tx-icon name="search-plus" /> View full size</span>  </ng-template>  <ng-template txImagePreview let-src let-style="style" let-close="close">    <figure class="figure">      <img [src]="src" alt="Quiet coast" [style]="style" />      <figcaption>        Low tide in a sheltered bay        <button txButton size="small" severity="secondary" (click)="close()">Done</button>      </figcaption>    </figure>  </ng-template></tx-image>

Design tokens

dt changes the tokens of one image: here a solid toolbar with square buttons.

16 lines

<tx-image  src="images/gallery/forest.svg"  alt="Pine forest"  width="320"  height="213"  preview  [dt]="{    toolbar: {      background: 'var(--tx-surface-950)',      borderRadius: '10px',      borderColor: 'transparent',    },    action: { borderRadius: '7px' },    preview: { background: 'rgba(0, 0, 0, 0.8)' },  }"/>