reactjs - 在 Material-UI CardMedia 中显示加载器

Question

当图像尚未加载但它不工作时，我试图在 CardMedia 中显示加载器。如果我将加载器放在 CardText 中，那么页面会正常工作并显示加载器。我的代码有什么问题，或者是否有在图像加载之前在卡片媒体中显示加载程序的解决方案？

我使用的是 material-ui v0 版本。

这是我的代码

加载程序:

renderLoading(){
return (
  <RefreshIndicator
    size={40}
    left={10}
    top={0}
    status="loading"
    style={{marginLeft: '50%', display: 'inline-block', position: 'relative'}}
/>
)
}

卡片:

<CardMedia overlay={<CardTitle title={this.props.userName} subtitle="Your cover photo" />}>
   {this.props.coverPhotoLoading && this.renderLoading()} //this isn't working 
   {coverPhoto ? <img src={coverPhoto} width="100%" height="400px"/> :
      <img src="" alt="This user cover photo is not set" width="100%" height="400px"/>}

</CardMedia>

Answer 1

发生这种情况的原因是因为您试图同时显示 <RefreshIndicator />和一个空的 <img/>同时。

考虑执行以下操作:

<CardMedia overlay={<CardTitle title={this.props.userName} subtitle="Your cover photo" />}>
   {!this.props.coverPhotoLoading && coverPhoto ?
    <img src={coverPhoto} width="100%" height="400px"/> :
    this.renderLoading()}
</CardMedia>