Skip to content

使用场景


  • 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>

属性


属性类型必填默认值说明
srcstring''图像 src,支持跨域加载,但不支持缓存。
onlazybooleanfalse是否开启懒加载。
themestring'global'参见组件的 theme 选项。
disabledbooleanfalse参见组件的 disabled 选项。
langstring"global"参见组件的 lang 选项。

事件


事件名参数说明
loadobject图片加载完成时触发。
errorobject图片加载失败时触发。

MIT Licensed