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