Material UI Image

Images are ugly until they're loaded. Materialize it with material image! It will show a random material color as background and a loading animation until it's fully loaded.

See this component in action

This package is customized to use the scoped @logicline/material-ui package. Everything stayed the same.
The original package is available from npm via material-ui-image.

Installation

npm i --save @logicline/material-ui-image

Usage

Use this component just like a regular img tag.

import Image from '@logicline/material-ui-image'

// ...

render() {
  return (
    <div>
      <Image
        src="http://loremflickr.com/300/200"
      />
    </div>
  )
}

Material UI Image Properties

|Name |Type |Default |Description |----------------|------------|------------------------------------------|-------------------------------- |src* | string | | Specifies the URL of an image. |color | string | random color | Override the background color. |disableError | bool | false | Disables the error icon if set to true. |disableSpinner | bool | false | Disables the loading spinner if set to true. |errorSize | integer | 48 | Set the size of the error icon. |imageStyle | object | { width: 'inherit', height: 'inherit' } | Override the inline-styles of the image. |loadingSize | integer | 40 | Set the size of the refresh indicator. |loadingStyle | object | { position: 'relative' } | Override the inline-styles of the refresh indicator. |onTouchTap | func | | Fired when the user clicks on the image happened. |style | object | { width: 300, height: 200 } | Override the inline-styles of the root element.

* required property

License

The files included in this repository are licensed under the MIT license.