Image

Image utilizes the native HTML <img> element to display responsive images on a page and prevent content jumping while images are loading.

Usage

API

DaffImageModule

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

@NgModule()
class DaffImageModule {}

DaffImageComponent

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

@Component()
class DaffImageComponent implements OnInit {
  @Input() 
  get src(): string
  set src(value): string
  @Input() 
  get alt(): string
  set alt(value): string
  @Input() 
  get width(): number
  set width(value): number
  @Input() 
  get height(): number
  set height(value): number
  @Output() load: EventEmitter<void>
}

Selector: 'daff-image'

Properties

Name	Type	Description
@Input() src	string
@Input() alt	string
@Input() width	number
@Input() height	number
@Output() load	EventEmitter<void>

DAFF_IMAGE_COMPONENTS

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

const DAFF_IMAGE_COMPONENTS: readonly [typeof DaffImageComponent]