Skip to content

Support styles applied to the img after loading #31

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
cmenge opened this issue Jan 26, 2019 · 1 comment · May be fixed by #46
Open

Support styles applied to the img after loading #31

cmenge opened this issue Jan 26, 2019 · 1 comment · May be fixed by #46

Comments

@cmenge
Copy link

cmenge commented Jan 26, 2019

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):

gallery-details

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
Copy link
Owner

Aljullu commented Mar 17, 2019

@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?

@elamperti elamperti mentioned this issue Mar 31, 2019
Closed
@Aljullu Aljullu linked a pull request Jul 27, 2019 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add loadedImageProps and placeholderProps props Aljullu/react-lazy-load-image-component
2 participants
@cmenge @Aljullu