手柄圖像加載在陣營

我使用此代碼加載圖像手柄圖像加載在陣營

{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：它看起來像這樣加載

來源

2017-07-15 MichaelRazum

在一個簡單的解決方案是利用了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} /> 
     ) 
    } 
}

來源

2017-07-16 01:32:15 enjoylife

你好，非常感謝。我希望有一種方法可以使用alt屬性。但這個解決方案工作正常。在我的示例中，我必須添加{this.state.didLoad && {PREIS} €}麻煩了。操作樣式並不能很好地工作，因爲我使用react-bootrstrap，它會覆蓋圖像組件的完整樣式。 – MichaelRazum

手柄圖像加載在陣營

回答

相關問題