[英]How can I get my img src to keep changing between 3-4 images when hovered?
[英]React img not immediately changing when src changes. How can I fix this?
我有一个带有 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;
只需将关键属性添加到您的图像标签,并为图像源等关键属性分配一些唯一值。
<img src={image_source} key={image_source}></img>
做了我自己的解决方法。
我相信因为 react 没有安装新组件(即<img>
),所以在加载完成之前它不会更新到新图像。
我所做的是检查src
在componentDidUpdate
更改并将状态更改为LOADING
。 然后我将 img 样式设置为display: none
而其状态为LOADING
。
编辑:另外,通过手动设置我自己的密钥,我可以强制 React 重新渲染<img>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.