wcandillon / react-progressive-image-loading Goto Github PK

I'm getting this
`Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

• Move code with side effects to componentDidMount, and set initial state in the constructor.
• Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: ProgressiveImage`

Can you please update or guide me to update to make it work forever

Thanks

Hi,

See the code sample at https://codesandbox.io/s/m94pp34x9y
Until the entire image do not come under the viewport, the actual image wont get loaded. Can you please help how to fix this?
For me it either looks like I am missing something or there is issue with the framework.

The actual behavior should have been that as soon the top of the image enters the viewport, the actual image should get loaded up.

I tried to change images dynamically everytime the next button is pressed. But not changing.
This is what I'm doing. Any help will be appreciated. Thanks

<ProgressiveImage preview={this.getThumbnail(step)} src={this.getImage(step)} render={(src, style) => <div className="d-flex flex-column" style={Object.assign(style, { backgroundSize: 'cover', backgroundPosition: 'center', height: '100vh', position: 'relative', backgroundImage: url(${src}), zIndex: 999 })}>

First off, thanks a ton for creating this helpful tool!

I've noticed that if the full image (src) hasn't rendered and you switch the route / component of the application, you will be met with this warning in the console...
Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

I'm thinking it has to do with the functions running this.setState... -- any ideas on how to resolve this so these warning don't pop-up?

Hi, thanks for this awesome component !

How can I handle loading errors (eg: bad URL) ?

componentWillUnMount -> componentWillUnmount

import ProgressiveImage   from "react-progressive-image-loading";
 <ProgressiveImage
          preview="/src/preview.jpg"
          src="/src/bk-1.jpg"
          transitionTime={500}
          transitionFunction="ease"
          render={(src, style) => <img src={src} style={style} />}
        />

warning.js:35 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of MyComponent.
in MyComponent
printWarning @ warning.js:35
warning @ warning.js:59
createElement @ ReactElementValidator.js:192
render @ index.jsx:30
(anonymous) @ ReactCompositeComponent.js:795
measureLifeCyclePerf @ ReactCompositeComponent.js:75
_renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:794
_renderValidatedComponent @ ReactCompositeComponent.js:821
performInitialMount @ ReactCompositeComponent.js:361
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
mountComponentIntoNode @ ReactMount.js:104
perform @ Transaction.js:143
batchedMountComponentIntoNode @ ReactMount.js:126
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
_renderNewRootComponent @ ReactMount.js:319
_renderSubtreeIntoContainer @ ReactMount.js:401
render @ ReactMount.js:422
./src/index.jsx @ index.jsx:54
webpack_require @ bootstrap 195e962419c58229becf:676
fn @ bootstrap 195e962419c58229becf:87
0 @ bundle.js:45254
webpack_require @ bootstrap 195e962419c58229becf:676
./node_modules/@blueprintjs/core/dist/accessibility/focusStyleManager.js.Object.defineProperty.value @ bootstrap 195e962419c58229becf:722
(anonymous) @ bootstrap 195e962419c58229becf:722
invariant.js:44 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of MyComponent.
at invariant (invariant.js:44)
at instantiateReactComponent (instantiateReactComponent.js:74)
at instantiateChild (ReactChildReconciler.js:44)
at ReactChildReconciler.js:71
at traverseAllChildrenImpl (traverseAllChildren.js:77)
at traverseAllChildrenImpl (traverseAllChildren.js:93)
at traverseAllChildren (traverseAllChildren.js:172)
at Object.instantiateChildren (ReactChildReconciler.js:70)
at ReactDOMComponent._reconcilerInstantiateChildren (ReactMultiChild.js:185)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:224)

I have been through most progressive image loaders, I find this one the most convenient. However, I am finding it difficult to use. What am I doing wrong?

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Cover`.

import React from 'react'
import ProgressiveImage from 'react-progressive-image-loading';

const Cover = (props) => {
	const CoverStyle = {
		height: "70vh",
		backgroundSize: 'cover',
		backgroundPosition: 'center center'
	}

	return (
		<ProgressiveImage
			preview={props.img_compressed}
			src={props.img}
			render={(src, style) => <img src={src} style={CoverStyle} />}
		/>
	)
};

export default Cover