使用场景
Image更适合跨域图片加载场景。- 它更偏向直接渲染图片,不提供
ImgBox那种加载进度能力。 - 当图片来源是跨域地址,或不适合走
ImgBox的请求方式时,优先使用Image。
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>属性
| 属性 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| src | string | 否 | '' | 图像 src,支持跨域加载,但不支持缓存。 |
| onlazy | boolean | 否 | false | 是否开启懒加载。 |
| theme | string | 否 | 'global' | 参见组件的 theme 选项。 |
| disabled | boolean | 否 | false | 参见组件的 disabled 选项。 |
| lang | string | 否 | "global" | 参见组件的 lang 选项。 |
事件
| 事件名 | 参数 | 说明 |
|---|---|---|
| load | object | 图片加载完成时触发。 |
| error | object | 图片加载失败时触发。 |