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 {
  src: InputSignalWithTransform<string, string> = input.required<string, string>({ transform: validateInput('src') })
  alt: InputSignalWithTransform<string, string> = input.required<string, string>({ transform: validateInput('alt') })
  width: InputSignalWithTransform<number, number> = input.required<number, number>({ transform: validateInput('width') })
  height: InputSignalWithTransform<number, number> = input.required<number, number>({ transform: validateInput('height') })
  priority: InputSignal<boolean> = false
  @Input() skeleton: boolean = false

  loaded: OutputEmitterRef<void> = output<void>()
}

Inputs

src

InputSignalWithTransform<string, string>

Default	`input.required<string, string>({ transform: validateInput('src') })`
Description	The URL of the image.

alt

InputSignalWithTransform<string, string>

Default	`input.required<string, string>({ transform: validateInput('alt') })`
Description	The alternate text for the image.

width

InputSignalWithTransform<number, number>

Default	`input.required<number, number>({ transform: validateInput('width') })`
Description	The width of the image.

height

InputSignalWithTransform<number, number>

Default	`input.required<number, number>({ transform: validateInput('height') })`
Description	The height of the image.

priority

InputSignal<boolean>

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

skeleton

boolean

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

Outputs

loaded

OutputEmitterRef<void>

Default	–
Description	Emits when the image has loaded.

Modules

DaffImageModule

Deprecated

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

@NgModule()
class DaffImageModule {}