Image

Image has built-in performance and accessibility optimizations that allow users to easily display responsive images.

Components

DaffImageComponent

import { DaffImageComponent } from '@daffodil/design/image'

@Component()
class DaffImageComponent implements OnInit {
  priority: InputSignal<boolean> = input(false)

  @Input() @HostBinding() skeleton: boolean = false
  @Input() src: string
  @Input() alt: string
  @Input() width: number
  @Input() height: number

  @Output() load: EventEmitter<void> = new EventEmitter()
}

Inputs

skeleton

boolean

Default	`false`
Description	Controls whether the component displays a skeleton loading state.

src

string

Default	–
Description	The URL of the image.

alt

string

Default	–
Description	The alternate text for the image.

width

number

Default	–
Description	The width of the image.

height

number

Default	–
Description	The height of the image.

Outputs

load

EventEmitter

Default	–
Description	Emits when the image has loaded.

Properties

priority

InputSignal

Default	`input(false)`
Description	Whether the image should be treated as a priority image for loading. Priority images are loaded eagerly and not lazy-loaded.

Modules

DaffImageModule

Deprecated

import { DaffImageModule } from '@daffodil/design/image'

@NgModule()
class DaffImageModule {}