Skip to content

Differences ​


  • Img is the recommended general-purpose component.
  • It switches between ImgBox and Image automatically according to the loading situation.
  • Use Img when you want a single component API and do not want to choose between same-origin and cross-origin loading manually.

Img-DEMO ​


vue
<fv-Img src="https://placehold.co/500x300/png?text=VFluent+Sample+1" style="width: 500px; height: 300px;"></fv-Img>
vue
<fv-Img src="https://placehold.co/500x300/png?text=VFluent+Sample+2" style="width: 500px; height: 300px;"></fv-Img>

Img-Lazy Load ​


vue
<fv-Img src="https://placehold.co/500x300/png?text=VFluent+Sample+3" :onlazy="true" style="width: 500px; height: 300px;"></fv-Img>

Properties ​


PropertyTypeRequiredDefaultDescription
srcstringNo''See the Img src option.
onlazybooleanNofalseLazy load image
loadingColorstringNo'rgba(36, 36, 36, 1)'
onbackgroundbooleanNofalseShow as background
themestringNo'global'See the Img theme option.
disabledbooleanNofalseSee the Img disabled option.
langstringNo"global"See the Img lang option.

Events ​


EventArgumentsDescription
loadobjectTriggered when the image finishes loading.
errorobjectTriggered when the image fails to load.

MIT Licensed