setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Image component.

Should probably check if the component is unmounted when doing asynchronous setState.

Hi there,
I've used your package in a project and it seems to fail the image loading, enter in the onError callback with this error:
this.updater.enqueueCallback is not a function
even though the image exists.
I've been looking around for the cases this error was thrown and this react issue thread explains that the package installation brings an older version than react since it's listed as a dependency not as a peerDependency:
facebook/react#10320 (comment)
Please, can you apply this quick fix ?

Hello,

Using this package causes CORS issues because of XHR requests for non-configured servers. This can be tricky when trying to load images from server where we don't have access to change CORS policy.

However with a 5 mins investigation : The Image() object can load images and bypass CORS validation. But it load it into a HTMLImageElement thus making it harder to inject with React (maybe with refs?). Plus I don't know if we can keep loading cancelation.

Related to #1 , in IE11 this error is shown in componentWillUnmount.

SCRIPT5007: Unable to get property 'abort' of undefined or null reference

Seems like this.request is null.

I recently received a task from my project manager, which she received from a project manager at Microsoft, making mention that in Microsoft Edge, images will not display if data/image is used with a wildcard (asterisk). This perhaps should be added as a warning to the readme?

Can I send my custom loading component or ".gif" for loading indication?

<SwipeableViews 
    className={`${prefixCls}__swiper`} 
    index={state.index}
    animateTransitions={state.animateTransitions}
    onChangeIndex={index => this.swiperChange(index)}
>
    {
        state.data.map((item, idx) => (
            <Image 
                className={`${prefixCls}__img`} 
                key={idx}
                source={item.url}
            />
        ))
    }
</SwipeableViews>

I have a Carousel but it's moving horizontally , so it just the first img has lazy and other do not work.

http://ww3.sinaimg.cn/mw690/715ed77dgw1f9g6x6iyj9g20b00cqkf1.gif

if there some trigger api ?

By the way my english is very bad, i hope you can help me, thank you!

Right now the component is using the window scroll element to check every time the user scroll if the image in in the viewport (or near to it). This can be a big problem if there are many images and doesn't let the component to receive what to listen if it's rendered in another scrollable element.

With IntersectionObserver is it possible to detect this in a better way and fallback to always render the image.

I saw your comment on one issue: -

The defaultSource prop is used for that. Is documented on the readme.

But I'm not clear how to define defaultSource, can you please throw some light on it?

Thank you very much in advance.

Much appreciated!!

A common use case for lazyloading is also to do deferred loading of images - i.e, load a small thumbnail / blurry image first and in the background load the actual image up.

This logic is distinct from the viewport calculation one, and may or may not need it. Does it therefore make sense to split this into two components, something like

<LazyLoadWhenInViewport>
  <LazyImage />
</LazyLoadWhenInViewport>

So that one can directly use <LazyImage> without using the layout code if needed. Since the hooks for when to trigger the lazy loading are present in <LazyImage>, this could potentially allow more robust parent components to be used for a variety of use cases.

It's not possible to set up the size for the defaultSource.

If you are using a normal dependency, then in webpack's source map, you'll find two react library bundled.