处理React

时间:2017-07-15 21:30:16

标签: javascript css image reactjs

我使用此代码加载图片

{Image} from 'react-bootstrap';
<Image src={res.imgUrl} className={styles.image} onError={(e)=>{e.target.src="/defaultImage.png"}} responsive thumbnail />
<Label bsStyle="primary" className={styles.price}}>{Price} &#8364;</Label>

以下是标签

的css代码
.price {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 0.95em;
    }

工作正常。但是在加载过程中,标签&#34; -Element显示效果不佳,因为还没有已加载的图像,并且没有足够的位置显示。

对此有一个很好的解决方案吗?

谢谢!

PS:加载时看起来像这样

enter image description here

1 个答案:

答案 0 :(得分:3)

一个简单的解决方案是利用onLoad事件和didLoad标志来延迟渲染图像,直到它完全加载。

class Example extends Component {

    constructor(props) {
        super(props);

        this.state = {
            didLoad: false
        }
    }

    onLoad = () => {
        this.setState({
            didLoad: true
        })
    }


    render() {
        const style = this.state.didLoad ? {} : {visibility: 'hidden'}
        return (
            <img style={style} src={this.props.src} onLoad={this.onLoad} />
        )
    }
}