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