ProcessImage doesn't seem to rerender
thecomputerguyjeff opened this issue · comments
When we run this sample code, both Images are initially set to "Scott". The "Original Image" then quickly changes to the image loaded in from the database, but the "New Image" (the ProcessImage) stays as "Scott". (It also doesn't change the brightness of the image, and processedImage never seems to kick off)
We have tried this with storage={false} also and it didn't change the results.
`
import React, {Component} from 'react';
import './App.css';
import ProcessImage from 'react-imgpro'
import Scott from './assets/images/Scott-Happy.jpg'
class App extends Component {
constructor(props) {
super(props)
this.state = {
originalImage: Scott,
src: '',
err: null,
photos: [],
retrievePhotosLoading: false,
loadedImage: Scott,
}
}
async componentDidMount() {
try {
const photosRetrieved = await fetch('https://localhost:8080/api/v1/images/ASDF')
const photosJson = await photosRetrieved.json()
this.setState({
photos: photosJson,
getPhotoDataComplete: true,
loadedImage: window.atob(photosJson[0].photoData)
})
} catch (error) {
console.log(error)
}
}
render() {
return (
<div>
<h1>This is our imgPro Test Playground</h1>
<br/><br/>
<b>Original Image</b>
<br/>
<img src={this.state.loadedImage} alt="Scott is REALLY happy"/>
<br/><br/>
<b>New Image:</b>
<br/>
<ProcessImage
image={this.state.loadedImage}
brightness={.8}
// processedImage={(src, err) => this.setState({src, err,})}
/>
</div>
);
}
}
export default App;
`
Can you show me the output of your browser console?
In 1.3.7 you can use re-render feat