search

scaleflex / react-cloudimage-responsive

Cloudimage Responsive will smartly resize, compress and accelerate images across the World in your site for all devices. The plugin supports lazy loading technique with fancy animation on image load. Any questions or issues, please report to https://github.com/scaleflex/react-cloudimage-responsive/issues
MIT License
45 stars 16 forks source link

lazyLoading causes React warning #20

Closed mikecx closed 2 years ago

mikecx commented 2 years ago

We're seeing the follow error in development when using the lazyLoading property on <Img /> tags.

Warning: React does not recognize the `lazyLoading` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `lazyloading` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at img
    at div

The simplified version of the code looks like the following:

import Img from 'react-cloudimage-responsive'

<Img ratio={1.0} src={url} params={{ gravity: 'auto' }} lazyLoading={false} />

I've created a super basic codesandbox.io sample to show the issue. You'll have to put your own token in the token field for it to actually show the image. Once it's loaded, open the codesandbox console and you'll see the same React warning.

https://codesandbox.io/s/cool-currying-cdvqu?file=/src/App.js

sumitngupta commented 2 years ago

+1

mikecx commented 2 years ago

I've opened a pull request that fixes the error by not having it returned from the utils.js getFilteredProps method which means it won't be spread on img.js lines 123-133 and then subsequently on line 164.

amrw-js commented 2 years ago

@mikecx thanks for contributing, your MR request has been merged and released a new version.