Material style image with loading animation


1.4.14 years ago4 years agoMinified + gzip package size for @logicline/material-ui-image in KB


Material UI Image

JavaScript Style Guide Build Status Greenkeeper badge

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.


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


Use this component just like a regular img tag.

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

// ...

render() {
  return (

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


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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.