images should take alt tags

<Image src={tile.src} imageStyle={{ height: tile.height, width: tile.width }} color='transparent' />

It stays spinning forever:

even though the image was requested in the Network tab of my inspector:

Currently, the image gets stretched regardless of the aspect ratio of the images. There was an issue regarding this but that one is closed now because according to them we can't determine the aspect ratio of the image which is not even loaded and that is correct #26. But I think what we can do is rather than determining the width and height of the container we should shrink the image so that it will fit into that container. Currently, the image is using 100% width and height therefore it is stretching. if we change it to max-width and max-height the image gets fitted within the container without stretching. (Centering of the image also need to be done)

I'd like to use this, but I don't really want that white circle for my gallery. It would be cool if a normal CircleProgress component could be used.

I'm not sure what filterBrightness and filterSaturation are - I can't find them referenced by this name anywhere on the internet (only filter: brightness(), etc) and I haven't seen any evidence that it's possible to transition individual filter types with independent durations, since they all live under the same CSS property.

Any package requiring material-ui-image without babel-runtime installed will see the following error:

Module not found: Error: Can't resolve 'babel-runtime/core-js/object/get-prototype-of' in '[snipped]\node_modules\material-ui-image\lib\components\Image'

This can be resolved by adding a package dependency on babel-runtime (or a peer dependency, if that's desired).

When d3a13f8 got added, the types were not.

I.e anyone using typescript will find that these methods are missing when in fact they are already implemented

By default, this component shows a random color while loading. 🏳️‍🌈 It would be great if there was a prop to disable this and set a default color ⬛.

Same problem described in TeamWertarbyte/material-ui-chip-input#312.

I noticed that this uses a div over the image (I assume as a placeholder so the layout doesn't change if the image doesn't display). The only issue with that is that it doesn't allow right clicking the image to get a context menu.

Maybe the placeholder div could be moved behind the image so we can click?

EDIT: Current workaround is to supply a imageStyle={{zIndex: 1}} prop which makes the image render above the div for display and interaction purposes.

component:

<Image
         src={menu.photos.web}
          color={placeholderColor}
           loadingSize={30}
           alt={menu.name}
           style={{ minHeight: '143px', height: '100%' }
/>

Whenever I try to left click an Image, its onTouchTap function isn't fired. It works just fine with right clicks or mouse wheel clicks.

Hi @saschb2b - came across by chance. Feel free to submit a PR for a 'related projects' entry in the MUI docs. 👍

Hey how can I use your component as a css background image. is there a workaround?

Latest version of @material-ui/icons is 2.x.x and a peer dependency warning pops up looking for 1.x.x

npm WARN [email protected] requires a peer of @material-ui/icons@^1.0.0 but none is installed. You must install peer dependencies yourself.

having the image fading in over the course of 2.5 seconds is way too slow. the perceived load time for the user would make this feel clunky. it would be better to make the transition sub 1s by default, or give an option to customise the transition time

How can I resize the image? When I use imageStyles attribute, it resizes the image but there is an empty white space of the original image.

import Image from "material-ui-image";

const Exercises = () => {
  return (
    <div>
      <Image
        src="https://bit.ly/2GjUWDP"
        alt="hello"
      />
      <h1>hello</h1>
    </div>
  );
};

export default Exercises;

Images just won't render. Whenever i try to add an image while working with material-ui, image just won't render. What is it that i'm doing wrong?

Hello! Nice library you made here.

I'm using mdi-material-ui for icons in my app since it includes tons more icons, but this library requires me to use @material-ui/icon, and I don't want to have both, would it be possible to not use @material-ui/icon directly in here so it's compatible with more icon libraries? Bring your own 👍

Can you please support Martial UI v5?

Steps to reproduce:

• include material-ui-image on a page
• set some value for iconcontainerstyle property

Actual result (inc console):

index.js:1 Warning: React does not recognize the iconContainerStyle prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase iconcontainerstyle instead. If you accidentally passed it from a parent component, remove it from the DOM element.

The v1.0.0-rc.0 breaking change affects the material-ui-image component.

The diff
-import CircularProgress from '@material-ui/core/Progress/CircularProgress';
+import CircularProgress from '@material-ui/core/CircularProgress';

      <Button>
        <Image src="https://images.unsplash.com/photo-1614891069485-2402767ca01f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max" />
      </Button>

In this case, Image component doesnt view.
How can I make it work with Button material ui component?

Here is example:
https://codesandbox.io/s/gifted-hofstadter-y496r?file=/src/App.js

It is crucial feature to have automatic aspect ratio display. One cannot assume that all images displayed on a website are always constrained in a fixed aspect ratio.

interface ImageProps {
   aspectRatio?: number | 'auto';
}

I am using the following patch:

diff --git a/node_modules/material-ui-image/lib/components/Image/Image.d.ts b/node_modules/material-ui-image/lib/components/Image/Image.d.ts
index d0dcb30..ee20c48 100644
--- a/node_modules/material-ui-image/lib/components/Image/Image.d.ts
+++ b/node_modules/material-ui-image/lib/components/Image/Image.d.ts
@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 
 export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'loading'> {
     animationDuration?: number,
-    aspectRatio?: number,
+    aspectRatio?: number | 'auto',
     cover?: boolean,
     color?: string,
     disableError?: boolean,
diff --git a/node_modules/material-ui-image/lib/components/Image/Image.js b/node_modules/material-ui-image/lib/components/Image/Image.js
index 3aa215b..dbb6293 100644
--- a/node_modules/material-ui-image/lib/components/Image/Image.js
+++ b/node_modules/material-ui-image/lib/components/Image/Image.js
@@ -76,12 +76,18 @@ var Image = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "handleLoadImage", function (e) {
       _this.setState({
         imageLoaded: true,
-        imageError: false
+        imageError: false,
       });
 
       if (_this.props.onLoad) {
         _this.props.onLoad(e);
       }
+
+      if (_this.props.aspectRatio === 'auto') {
+        _this.setState({
+          finalAspectRatio: _this.image.current.naturalWidth / _this.image.current.naturalHeight ,
+        });
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleImageError", function (e) {
@@ -99,7 +105,8 @@ var Image = /*#__PURE__*/function (_Component) {
     _this.state = {
       imageError: false,
       imageLoaded: false,
-      src: _this.props.src
+      src: _this.props.src,
+      finalAspectRatio: _this.props.aspectRatio,
     };
     _this.image = /*#__PURE__*/_react["default"].createRef();
     return _this;
@@ -131,6 +138,7 @@ var Image = /*#__PURE__*/function (_Component) {
           disableTransition = _this$props.disableTransition,
           iconContainerStyle = _this$props.iconContainerStyle,
           style = _this$props.style;
+      var finalAspectRatio = this.state.finalAspectRatio;
       var imageTransition = !disableTransition && {
         opacity: this.state.imageLoaded ? 1 : 0,
         filterBrightness: this.state.imageLoaded ? 100 : 0,
@@ -140,7 +148,9 @@ var Image = /*#__PURE__*/function (_Component) {
       var styles = {
         root: _objectSpread({
           backgroundColor: color,
-          paddingTop: "calc(1 / ".concat(aspectRatio, " * 100%)"),
+          paddingTop: finalAspectRatio === 'auto'
+            ? '50px'
+            : "calc(1 / ".concat(finalAspectRatio, " * 100%)"),
           position: 'relative'
         }, style),
         image: _objectSpread(_objectSpread({

<div style={{
          width: '100%',
          height: '100%',
          position: 'absolute',
          top: 0,
          left: 0,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          pointerEvents: 'none'
        }}>

They are not configurable

img has an attribute called loading, which is different from the used props loading.

I suggest to rename the props.

It looks like the material-ui-next folks are considering flattening this particular component from the /Progress folder (where it is in my latest installed version) to the root. The material-ui-image component is looking for it in the root of material-ui and it doesn't seem to be there in the 1.0 (37) version.

I want to use the plugin in the gallery of pictures that have different linear dimensions. I would like the parameter 'aspectRatio' to automatically determine the ratio of the image and set the dimensions of the container not only (1/1). Is there such a built-in feature? Please give an example. Thank.

The opacity of the image doesn't change after the image is loaded successfully.

Template - https://github.com/gatsbyjs/gatsby-starter-default

For some reason, the src parameter is not passed to the img tag.

{src && !this.state.imageError ? <img
          {...image}
          style={{
            ...styles.img,
            opacity: !this.state.imageLoaded ? 0 : 1,
            animation: !this.state.imageLoaded ? '' : 'filter-animation 1s',
            ...imageStyle
          }}
          onLoad={() => this.imageLoaded()}
          onError={() => this.setState({imageError: true})}
        /> : null
        }

But, when i added src: {src} before onLoad: ..., the image load ok.

{src && !this.state.imageError ? <img
          {...image}
          style={{
            ...styles.img,
            opacity: !this.state.imageLoaded ? 0 : 1,
            animation: !this.state.imageLoaded ? '' : 'filter-animation 1s',
            ...imageStyle
          }},
          src: {src},
          onLoad={() => this.imageLoaded()}
          onError={() => this.setState({imageError: true})}
        /> : null
        }

I'm on:

"material-ui-image": "^3.0.0-pre.6",

I can't compile and receive the following message:

./node_modules/material-ui-image/lib/components/Image/Image.js
Module not found: Can't resolve 'material-ui-icons/BrokenImage' in '/Users/julius/git/projects/freespace/web/freespace-web/node_modules/material-ui-image/lib/components/Image'

Might be something I'm doing wrong?

Uncaught Error: Cannot find module "material-ui-icons/BrokenImage"
    at webpackMissingModule (Image.js:56)
    at Object../node_modules/material-ui-image/lib/components/Image/Image.js (Image.js:56)
    at __webpack_require__ (bootstrap 20ff8bdf495a417520f5:669)
    at fn (bootstrap 20ff8bdf495a417520f5:87)
…

Nice component, thanks for any help!

Hello I'm glad to use your component it's pretty nice, I have some small contribution, I've created this typescript module to add the typescript support.

material-ui-image.d.ts

declare module "material-ui-image" {
    import { ReactNode } from "react";
    export interface ImageProps {
        src: string,
        aspectRatio?: number,
        color?: string,
        disableError?: boolean,
        disableSpinner?: boolean,
        disableTransition?: boolean,
        errorIcon?: ReactNode,
        imageStyle?: object,
        loading?: ReactNode,
        onClick?: (event:any) => any,
        style?: object
    }
    export const ImageComponent: React.ComponentType<ImageProps>;
    export default ImageComponent;
}

This package is really great! I love the aspectRatio support, the spinning wheel and the fading in of the image.

I was so excited to start using it, but then I realized that it doesn't support alt text, which is required for accessibility support.

Can you please add this to the feature request?

Thanks!

Recently I created a React project using the create-react-app tool and it set the react version to 17+. Unfortunately the package.json for this project uses ^16 which only allows React 16.y.z versions to be used.

I'm not sure how much of a change upgrading to React 17 would actually be for this package. I skimmed through their ChangeLog and it looks like there isn't much impact but I'm not familiar with this code base.

The definition of the loading prop is inconsistent with that in the React.ImgHTMLAttributes<HTMLImageElement> type.

node_modules/material-ui-image/lib/components/Image/Image.d.ts:2:18 - error TS2430: Interface 'ImageProps' incorrectly extends interface 'ImgHTMLAttributes<HTMLImageElement>'.
  Types of property 'loading' are incompatible.
    Type 'ReactNode' is not assignable to type '"eager" | "lazy" | undefined'.
      Type 'null' is not assignable to type '"eager" | "lazy" | undefined'.

2 export interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {

Given that the loading prop does represent a valid HTML attribute, the ideal (but breaking) change would be to use a different prop that doesn't conflict.

Failing that it seems like Omit can at least silence the type checker, e.g.

import { ReactNode } from "react";                                              
export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'loading'> {
    animationDuration?: number,                                                 
    aspectRatio?: number,                                                       
    color?: string,                                                             
    disableError?: boolean,                                                     
    disableSpinner?: boolean,                                                   
    disableTransition?: boolean,                                                
    errorIcon?: ReactNode,                                                      
    iconContainerStyle?: object,                                                
    imageStyle?: object,                                                        
    loading?: ReactNode,                                                        
    onClick?: (event:React.MouseEvent<HTMLDivElement> ) => void,                
    onLoad?: (event: React.SyntheticEvent<HTMLImageElement>) => void,           
    onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void,          
    src: string,                                                                
    style?: object                                                              
}                                                                               
declare const ImageComponent: React.ComponentType<ImageProps>;                  
export default ImageComponent;                                                  

Currently it is possible to apply custom styles via styling attributes: style, imageStyle, etc.

It would be much greater, to be able to apply styles with materialUI's withStyles() hook.

const CustomImage = withStyles(theme => ({
  root: {
    backgroundColor: theme.palette.primary.main,
  },
  image: {
    height: 'auto',
  }
}))(Image);

I observed that after loading, the image isn't immediately faded in but instead a second random color flashes and then the image is faded in.

Haven't tried this project out yet, but looking through the docs and the code I don't think I see an option to add alt text?

I want to be able to detect when the image is finished loading or had an error loading so I can do something about it in my application. I propose adding optional onLoad and onError function props to the component, which get called respectively when the image has finished loading or has had an error loading.

It won't work if you used it as a child of a flex unless you wrap it around a box.

How to disable aspectRatio?

Howdy, and thanks for making this cool plugin.

Problem
I'm seeing this MASSIVE div below the image when I bring it in. I've tinkered with the imageStyle prop, changing the height and width, but I can't get rid of this huge div below the image. Here's what it looks like.

Stack
"@material-ui/core": "^4.0.0-alpha.8",
"@material-ui/icons": "^4.0.0-alpha.8",
"@material-ui/lab": "^4.0.0-alpha.54",
"@material-ui/styles": "^4.0.0-alpha.8",
"material-ui-image": "^3.2.3",
"next": "^8.1.0",
"react": "^16.8.6",
"react-dom": "^16.8.6"

Forgive me if I'm missing something obvious here, and thanks!

componentWillReceiveProps is deprecated and will be removed from the next major release of React while they are being used by Image.

I'm using material-ui-image@^3.2.0 and react@^16.9.0

Any page that uses Image shows the following warning:

As said in the title the event argument is not passed to the onLoad or onError method

Currently:

  handleLoadImage = () => {
    this.setState({ imageLoaded: true })
    if (this.props.onLoad) {
      this.props.onLoad()
    }
  }

  handleImageError = () => {
    if (this.props.src) {
      this.setState({ imageError: true })
      if (this.props.onError) {
        this.props.onError()
      }
    }
  }

Should be:

  handleLoadImage = (event) => {
    this.setState({ imageLoaded: true })
    if (this.props.onLoad) {
      this.props.onLoad(event)
    }
  }

  handleImageError = (event) => {
    if (this.props.src) {
      this.setState({ imageError: true })
      if (this.props.onError) {
        this.props.onError(event)
      }
    }
  }

I'm using material-ui v1.0.0-beta.

Your component <Image /> is loading CircularProgress component like this:

import { CircularProgress } from 'material-ui'

the error is here:

var _CircularProgress = require('material-ui/CircularProgress'); in node_modules/material-ui-image/lib/components/Image

However in doc https://material-ui-1dab0.firebaseapp.com/demos/progress/, is like this:

import { CircularProgress } from 'material-ui/Progress';

Anyway, it doesn't work, same error. what am i missing?

Thank