generated:catalog.entry.image.title
generated:catalog.entry.image.description
@xngui/components/image@xngui/components/imagechrome:demo.section
chrome:demo.preview
Image unavailable
import { Component } from '@angular/core';
import { XImage } from '@xngui/components/image';
import { XSkeleton } from '@xngui/components/skeleton';
@Component({
selector: 'app-example',
imports: [XImage, XSkeleton],
templateUrl: './image.component.html',
})
export class ExampleComponent {}
chrome:demo.events.title 1
- stateChange
loading
chrome:demo.api.title
x-image
chrome:demo.api.col.property
chrome:demo.api.col.type
chrome:demo.api.col.default
chrome:demo.api.col.description
srcXFileSource—Primary image source — URL, data URI, blob, or file.
altstring—Accessible description; use an empty string for decorative images.
fallbackXFileSource—Alternate source shown when the primary `src` fails to load.
widthnumber—Intrinsic width forwarded to the native `<img>`.
heightnumber—Intrinsic height forwarded to the native `<img>`.
aspectRatioXAspectRatioValue—Aspect ratio for the inner frame — e.g. `16:9` or `16 / 9`.
fitXImageFit'cover'CSS `object-fit` for the image surface.
positionstring'center'CSS `object-position` for the image surface.
loadingXImageLoading'lazy'Native loading strategy.
decodingXImageDecoding'async'Browser decoding hint for the native `<img>`.
crossOriginstring—Native `crossorigin` attribute when loading cross-origin assets.