Support styles applied to the img after loading

[cmenge]

Is your feature request related to a problem? Please describe. Use case: display a grid of preview images. To avoid image distortion and support various screen sizes and layouts, one can use images that have larger natural size than the possible preview sizes. These natural images should be centered, however - otherwise, you inadvertently crop the image to its top-left region, which is undesirable (top):

Describe the solution you'd like A common trick is to apply a style to the image like this (potentially in the X-direction, too):

  position: "relative",
  top: "50%",
  transform: "translateY(-50%)"
  ...

However, this should only be applied to the node. I propose to introduce loadedImageProps which are then spread to the image in getImg:

// ...
return <img onLoad={this.onImageLoad()} {...imgProps} {...loadedImageProps} />;

which can be used like

<LazyLoadImage
    loadedImageProps={{ className: classes.imagePositionHack }}
    // ...
/>

Describe alternatives you've considered Applying the style directly to the LazyLoad component doesn't work, because the relative transform meddles with the visibility detection. A simple className for the img component could be an option, similar to material-ui allows styling of children, e.g. <LazyLoad classes={{ img: myImgClassName }} ... />.

I can send a pull request in the day.

[Aljullu]

@cmenge thanks for opening an issue. Did you have time to prepare a PR? I was playing with this idea in a branch named loaded-image-props, but I'm not sure this prop will handle all usecases anyway, so I'm a bit reluctant to merge it.

If I understood your problem correctly, you could create a wrapper component and use beforeLoad and afterLoad events to change the className or style, right? Something like this:

import React from 'react';
import { LazyLoadImage } from 'react-lazy-load-image-component';

export class MyImage extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      className: 'not-loaded',
    };
  }

  beforeLoad() {
    this.setState({
      className: 'loading',
    });
  }

  afterLoad() {
    this.setState({
      className: 'loaded',
    });
  }
  
  render() {
    const { image } = this.props;
    const { className } = this.state;
    
    return (
      <LazyLoadImage
        afterLoad={this.afterLoad}
        alt={image.alt}
        beforeLoad={this.beforeLoad}
        className={className}
        src={image.src} />
    );
  }
};

export default MyImage;

Do you think that would solve your problem?