手柄图像加载在阵营

Question

我使用此代码加载图像

{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> 

下面是标签

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

它工作正常的CSS代码。但在加载期间，“标签” - 元素显示不太好，因为没有图像尚未加载，也没有足够的位置显示出来。

有没有一个很好的解决方案呢？

谢谢！

PS：它看起来像这样加载

Answer 1

在一个简单的解决方案是利用了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} /> 
     ) 
    } 
}