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

Components

DaffImageComponent

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

@Component()
class DaffImageComponent implements OnInit {
  @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.

Modules

DaffImageModule

Deprecated

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

@NgModule()
class DaffImageModule {}