When To Use
Imageis suitable for cross-origin image loading scenarios.- It focuses on direct image rendering and does not provide the progress behavior used by
ImgBox. - Prefer
Imagewhen the source is cross-origin or whenImgBoxis not suitable for the request mode.
Image-DEMO
vue
<fv-Image src="https://placehold.co/500x300/png?text=VFluent+Sample+1" style="width: 500px; height: 300px;"></fv-Image>vue
<fv-Image src="https://placehold.co/500x300/png?text=VFluent+Sample+2" style="width: 500px; height: 300px;"></fv-Image>Image-Lazy Load
vue
<fv-Image src="https://placehold.co/500x300/png?text=VFluent+Sample+3" :onlazy="true" style="width: 500px; height: 300px;"></fv-Image>Properties
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| src | string | No | '' | See the Image src option. |
| onlazy | boolean | No | false | See the Image onlazy option. |
| theme | string | No | 'global' | See the Image theme option. |
| disabled | boolean | No | false | See the Image disabled option. |
| lang | string | No | "global" | See the Image lang option. |
Events
| Event | Arguments | Description |
|---|---|---|
| load | object | Triggered when the image finishes loading. |
| error | object | Triggered when the image fails to load. |