Ref on images

[alex-r89]

Im trying to manipulate an image that is passed into the LazyLoadImage component via a React Ref, however I dont seem to be able to do so. The reason being is because I would like to manipulate the image, for example zoom in (increase scale) on click.

It would be great if a ref could be passed into the LazyLoadImage component, which is then put onto the image.

I have tried putting a ref onto the LazyLoadImage component its self, but this doesn't seem to work and I am unable to manipulate the actual image (for example increase its scale).

Thanks,

[Aljullu]

Right, I imagine that's because <LazyLoadImage> uses a ref internally and that would overwrite any ref passed from above. I wonder if wrapping <LazyLoadImage> in a <div> or something similar would be a good enough solution in your case:

  <div ref={this.imageRef}>
    <LazyLoadImage
      alt={image.alt}
      height={image.height}
      src={image.src}
      width={image.width} />
  </div>

[dantovbein]

Hi @Aljullu , what about passing refs to passing refs to placeholders? I'm figuring out that ref.current is always null before scrolling to the child element.

<LazyLoadComponent 
    threshold={200} 
    placeholder={<div ref={this.childRef}>Empty content :/</div>}>
        <div ref={this.itinerariesRef}>Child content!</div>
</LazyLoadComponent>

Is it possible? Thanks in advance

[dzucconi]

I'm surprised this doesn't come up more. You need access to the img#complete attribute to detect whether or not the image is loaded in a cached SSR context. You could forward the ref and internally compose using something like https://github.com/seznam/compose-react-refs

[jellohouse]

I would also like to have ref of the actual <img> inside LazyLoadImage! Please add this feature!