I have a basic <img>
with a src.
<img src={src} />
If I change the src from say /1.jpg
to /2.jpg
and the new image takes 1 second to load, React will continue to show /1.jpg
until the new image is loaded.
What I want is for the old image to be discarded while the new image is being loaded. (eg display: none)
Any idea how to accomplish this? Ideally without conditional rendering, because I still need to use onLoad
and onError
EDIT: Here's some more code. It's a little more complicated than my question, but I'm just trying to add some loading and error state to the image.
I have a button that calls this onClick
this.props.history.push('/${page + 1}');
This is the image component, where src is based on the page
from the URL.
import React, { Component } from 'react';
import CenteredLoading from 'components/loading/CenteredLoading';
type Props = { src: string };
type State = {
status: 'LOADING' | 'LOADED' | 'FAILED',
};
class ImageWithLoader extends Component<Props, State> {
state = {
status: 'LOADING',
};
handleImageLoad = () => {
this.setState({ status: 'LOADED' });
console.error('image loaded');
};
handleImageError = () => {
this.setState({ status: 'FAILED' });
console.error('image error');
};
render() {
const { src, ...otherProps } = this.props;
const { status } = this.state;
return (
<React.Fragment>
<img
{...otherProps}
onLoad={this.handleImageLoad}
onError={this.handleImageError}
src={src}
/>
{status === 'LOADING' && <CenteredLoading />}
{status === 'FAILED' && <p>error</p>}
</React.Fragment>
);
}
}
export default ImageWithLoader;
只需将关键属性添加到您的图像标签,并为图像源等关键属性分配一些唯一值。
<img src={image_source} key={image_source}></img>
Made my own workaround.
I believe because react isn't mounting a new component (ie <img>
), it's not going to update to the new image until it's finished loading.
What I did was check if the src
changed in componentDidUpdate
and change the status to LOADING
. Then I set img style to display: none
while its status was LOADING
.
EDIT: Also, by manually setting my own key, I can force React to re-render the <img>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.