Image

​

Overview

​

Import

import { MagaryImage } from 'ng-magary';

​

Basic Usage

<magary-image
  [src]="'assets/photo.jpg'"
  [alt]="'Product photo'"
  [width]="'300px'"
  [height]="'200px'">
</magary-image>

​

With Preview Mode

<magary-image
  [src]="'assets/photo.jpg'"
  [preview]="true"
  [alt]="'Click to preview'">
</magary-image>

​

Object Fit Options

<magary-image
  [src]="'assets/photo.jpg'"
  [objectFit]="'cover'">
</magary-image>

​

Lazy Loading

<magary-image
  [src]="'assets/large-photo.jpg'"
  [loading]="'lazy'"
  [alt]="'Lazy loaded image'">
</magary-image>

​

With Event Handlers

<magary-image
  [src]="imageSrc"
  [preview]="true"
  (onLoad)="handleLoad($event)"
  (onError)="handleError($event)">
</magary-image>

​

Input Properties

​

Output Events

​

Preview Mode Controls

• Zoom In: Increase image scale
• Zoom Out: Decrease image scale
• Rotate Left: Rotate counter-clockwise
• Rotate Right: Rotate clockwise
• Download: Download the image
• Close: Close preview mode

​

Features

• Preview mode: Full-screen preview with controls
• Zoom: In/out functionality
• Rotate: Left/right rotation
• Download: Download image to device
• Lazy loading: Optimize performance
• Object fit: Multiple fit options
• Error handling: Handle load failures
• Keyboard support: Escape to close preview

​

Preview Mode Example

<div class="gallery">
  <magary-image
    *ngFor="let photo of photos"
    [src]="photo.url"
    [alt]="photo.title"
    [preview]="true"
    [width]="'200px'"
    [height]="'200px'"
    [objectFit]="'cover'">
  </magary-image>
</div>

​

Accessibility

• Alt text for screen readers
• Keyboard navigation in preview mode
• Focus management
• ARIA labels on controls