クロム、アンドロイドブラウザは画像スタイルをレンダリングしません

Question

私は反応成分を持ち、データを読み込み、配列を繰り返し処理し、lorempixelから一連の画像を入力します。

.ekipa-list .ekipa-li .ekipa-li-headshot { 
    height: 3em; 
    width: 3em; 
    border-radius: 50%; 
    padding-top: 0; 
    margin-bottom: 0; 
} 

これらは正しく私のビューのいずれかに適用されます：

は、私はこれらのイメージのために、次のスタイルを持っています。 SafariとFirefoxでも正しく適用されます。しかし、別のビューでは初期ロード時には適用されません。どちらのビューも同じコンポーネントを同じデータでロードしています。

しかし、私はこれに行く再現するための要素を検査する際Chromeでのスタイルを見ることができますが、それらは

をレンダリングされません。 http://altereko.si/#/zavod

は、下のリスト内の画像を参照してください。次にkontaktに行き、それらが正しくレンダリングされるのを見てください。また、画面のサイズ変更時に正しくレンダリングされます。

この問題は、このコード行に起因すると思わ：予想通り

render() { 
    return (
     <li className="ekipa-li" id={this.props.id}> 
     <div className="ekipa-li-visible" onClick={this.expandContact}> 
      <img alt="portret-člana-ekipe" className="ekipa-li-headshot" src={this.props.photo}/> 
      <div className="ekipa-li-text"> 
      <p className="ekipa-li-name">{this.props.name}</p> 
      <p className="ekipa-li-function">{this.props.function}</p> 
      {this.props.bio ? <p className="ekipa-li-bio">{this.props.bio}</p> :null} 
      </div> 
     </div> 
     {!this.state.hidden 
      ? (<div className="ekipa-li-expand"> 
       <div className="ekipa-li-expand-link-container"> 
       <a className="ekipa-li-expand-link" href={'mailto:'+this.props.email}> 
        <i className="ekipa-li-icon material-icons">email</i> 
        <span className="ekipa-li-expand-link-text">{this.props.email}</span> 
       </a> 
       </div> 
       <div className="ekipa-li-expand-link-container"> 
       <a className="ekipa-li-expand-link" href={'tel:'+this.props.mobile}> 
        <i className="ekipa-li-icon material-icons">stay_current_portrait</i> 
        <span className="ekipa-li-expand-link-text">{this.props.mobile}</span> 
       </a> 
       </div> 
      </div>) 
      : null} 
     </li> 
    ) 
    } 

すべてがレンダリング：私は私のコンポーネントから削除

{this.props.bio ? <p className="ekipa-li-bio">{this.props.bio}</p> :null} 

。

私はバイオプロップを渡さないと同じことが起こります。

Answer 1

最も簡単な解決策はimgをdivにラップすることです。 zavodページには、フレックスレイアウトを折り返してストレッチする複数行の段落テキストがあるため、現在この問題が発生しています。

.flex { 
 
    display:flex; 
 
    width: 300px; 
 
}

<div class="flex"> 
 
    <img alt="portret-člana-ekipe" class="ekipa-li-headshot" src="http://lorempixel.com/100/100/"> 
 
    <div> 
 
    <p> 
 
     Nam erat mi, ullamcorper at blandit in, lacinia at magna. Suspendisse sit amet dapibus justo. Nam finibus nibh at viverra vehicula. Mauris posuere ac dui nec sollicitudin. Sed varius sed justo in elementum. Aliquam euismod nisl et massa fermentum tempus. Suspendisse et efficitur metus. Donec eleifend mi consequat libero semper mattis. 
 
    </p> 
 
    </div> 
 
</div> 
 

 
<div class="flex"> 
 
    <div> 
 
    <img alt="portret-člana-ekipe" class="ekipa-li-headshot" src="http://lorempixel.com/100/100/"> 
 
    </div> 
 
    <div> 
 
    <p> 
 
     Nam erat mi, ullamcorper at blandit in, lacinia at magna. Suspendisse sit amet dapibus justo. Nam finibus nibh at viverra vehicula. Mauris posuere ac dui nec sollicitudin. Sed varius sed justo in elementum. Aliquam euismod nisl et massa fermentum tempus. Suspendisse et efficitur metus. Donec eleifend mi consequat libero semper mattis. 
 
    </p> 
 
    </div> 
 
</div>