Image

Image component renders an img tag with some optional lazy load feature. "alt" and "src" props are required to enforce accessibility good practices.

test

Polyfills

This component requires some polyfills for Web API in order for it work properly in all browsers. See this table.

Props

NamePropTypeRequiredDefault ValueAllowed ValuesDescription
altstringtrue
classNamestringfalse
idstringfalsenull
loadingenumfalseeager
  • lazy
  • eager
onErrorfuncfalse() => {}
onLoadfuncfalse() => {}
shrinkboolfalsetrue
srcstringtrue
stretchboolfalsetrue

Image component provides an image which is responsive by default. Responsive behaviours can be controlled by two props: shrink and stretch. When both of them are set to true the image will adapt to the parent whether the dimensions of the parent are bigger or smaller than native image sizes. When shrink or strecth are set to false the smallest/biggest dimensions will be set by the native original images sizes.

  • Image shrink on smaller containers (width:"200px").
    test
  • Image stretch on bigger containers (width:"400px").
    test
  • Image doesn't shrink (width:"200px").
    test
  • Image doesn't stretch (width:"400px")
    test
Edit these docs on Github