Image

Overview

Image builds on Angular's NgOptimizedImage to provide responsive images with stable layouts out of the box. It helps to avoid common image-related performance and accessibility issues by:

• Preventing layout shift with required width and height attributes
• Ensuring accessibility by requiring descriptive alt text
• Maintaining proper aspect ratios for responsive designs

Usage

Within a standalone component

To use image in a standalone component, import DAFF_IMAGE_COMPONENTS directly into your custom component:

import { Component } from '@angular/core';
import { DAFF_IMAGE_COMPONENTS } from '@daffodil/design/image';

@Component({
  selector: 'custom-component',
  templateUrl: './custom-component.component.html',
  imports: [
    DAFF_IMAGE_COMPONENTS,
  ],
})
export class CustomComponent {}

Within a module (deprecated)

To use image in a module, import DaffImageModule into your custom module:

import { NgModule } from '@angular/core';
import { DaffImageModule } from '@daffodil/design/image';
import { CustomComponent } from './custom.component';

@NgModule({
  declarations: [
    CustomComponent,
  ],
  exports: [
    CustomComponent,
  ],
  imports: [
    DaffImageModule,
  ],
})
export class CustomComponentModule { }

Warning

This method is deprecated. It's recommended to update all custom components to standalone.

Required attributes

All four of the following attributes are required and will throw an error if missing:

Features

Skeleton screen

Use the skeleton property to display a placeholder skeleton screen that helps reduce load-time frustration.

Priority loading

Use the priority property to mark an image as a priority for loading. Priority images are loaded eagerly and not lazy-loaded.

Accessibility

Provide concise, meaningful descriptions that convey the content and purpose of the image by using the alt attribute. An error will be thrown if alt is missing.