Question

我有一个react组件，它可以加载一些数据，遍历数组并输入一堆来自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>
    )
  }

一切都按预期呈现。

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

Answer 1

最简单的解决方法是将img打包成div。目前正在发生这种情况，因为zavod页面包含多行段落文本，它包裹和拉伸弹性布局。

＆＃13;

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

＆＃13;

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

＆＃13;

chrome，android浏览器无法渲染图像样式

1 个答案: