Material Ui Image

screenshot of Material Ui Image

Material Ui Image

Material style image with loading animation


The Material UI Image is a component that enhances the loading experience of images by fading them in, following the material design image loading pattern. It is designed to be used with Material-UI 1.0.0-rc.0 or later.


  • Fading Animation: The image fades in with a specified duration of the animation.
  • Aspect Ratio: Allows you to specify the aspect ratio of the image.
  • Cover: Overrides the image's object fit to cover the container.
  • Background Color: You can override the background color of the image.
  • Disable Error: Disables the error icon if set to true.
  • Disable Spinner: Disables the loading spinner if set to true.
  • Disable Transition: Disables the transition if set to true.
  • Customization: You can override various inline-styles like image style, icon container style, and root element style.


To install the Material UI Image component, you need to have Material-UI 1.0.0-rc.0 or later installed. If you are using a previous version, it is recommended to update to the latest version.

npm install @material-ui/image


The Material UI Image component enhances the loading experience of images by fading them in, following the material design image loading pattern. It provides various customization options and can be easily integrated with Material-UI.


React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

Material UI

material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.

GitHub Pages

Gridsome is a Vue.js-based static site generator that makes it easy to build fast and flexible websites and applications by leveraging modern web technologies like GraphQL, Webpack, and hot reloading


Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.