Skip to content

ImgBox-DEMO


vue
<fv-ImgBox url="https://pixabay.com/get/g565be166e8140f4ba327de9588f7861b05817f9a28f618d4e954c7144a8b0dfddbee037ae9c48046eb2012b6b855ee6b712ac77debfc0908aac74a33bbdd631cad05872f40a5bd1fd648e49325023e08_1280.jpg?attachment=" style="width: 350px; height: 350px;"></fv-ImgBox>

ImgBox-Background Image


vue
<fv-ImgBox url="https://pixabay.com/get/g072152fd3a4d4d2221a931dc4e77199cd9b84a01595a0c855db60d30faf12f3e7b5fd53bf822f8a812c67900ae03c364367ffbf63756bf5752abe1c48ed3e41b389ba40f71a94a73506b5c02bb374d0a_1280.jpg?attachment=" :onbackground="true" style="width: 350px; height: 350px; background-size: cover;"></fv-ImgBox>

ImgBox-Lazy Load


vue
<fv-ImgBox url="https://pixabay.com/get/gc551fa833376f85019123271e24dd80e00437c1ad8aceda8c463ab6e72d1178577cd18729ca8f46f16afb8b35ec00050d1b69b703e1dcc43803efa200bcf447ebd607078ae82ce44d3286852dbe2fd52_1280.jpg?attachment=" :onlazy="true" style="width: 350px; height: 350px; background-size: cover;"></fv-ImgBox>

属性


属性类型必填默认值说明
urlstring''Image url,be careful don't use cross-domain url
onlazybooleanfalseLazy load image
loadingColorstring'rgba(36, 36, 36, 1)'
onbackgroundbooleanfalseShow as background
themestring'global'参见组件的 theme 选项。
disabledbooleanfalse参见组件的 disabled 选项。
langstring"global"参见组件的 lang 选项。

事件


事件名参数说明
errorobjectImage load failed will call back error function with error message.

MIT Licensed