chrome，android浏览器不呈现图像样式

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，看看它们是否正确渲染。它们也会在屏幕调整大小时正确呈现。

这个问题似乎是由这行代码引起的：

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

当我从我的组件中移除它时：

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>
    )
  }

一切都按预期呈现。

当我没有通过 bio 道具时也会发生同样的事情。

Answer 1

最简单的解决方法是将img 包装成div。目前正在发生这种情况，因为zavod 页面有多行段落文本，这些文本正在环绕和拉伸 flex 布局。

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