我有一个带有src的基本<img>
。
<img src={src} />
如果我将src从
/1.jpg
更改为/2.jpg
,并且新图像加载需要1秒钟,React将继续显示/1.jpg
,直到加载新图像。我想要的是在加载新图像时丢弃旧图像。 (例如显示:无)
任何想法如何做到这一点?理想情况下,没有条件渲染,因为我仍然需要使用
onLoad
和onError
编辑:这是更多代码。这个问题比我的问题要复杂一些,但是我只是想为图像添加一些加载和错误状态。
我有一个称为“onClick”的按钮
this.props.history.push('/${page + 1}');
这是图像组件,其中src基于URL中的
page
。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;
最佳答案
只需将key属性添加到您的图片标签,然后为key属性(例如图片来源)分配一些唯一值即可。
<img src={image_source} key={image_source}></img>
关于javascript - 当src更改时,React img不会立即更改。我怎样才能解决这个问题?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50690956/