在 Material-UI CardMedia 中显示加载器答案

【问题标题】：Show loader in Material-UI CardMedia在 Material-UI CardMedia 中显示加载器
【发布时间】：2018-06-26 23:54:30
【问题描述】：

当图像尚未加载但无法正常工作时，我正在尝试在 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>

【问题讨论】：

您确定this.props.coverPhotoLoading 的定义符合您的预期吗？我使用您的代码尝试了这个示例，它对我来说效果很好。
是的 this.props.coverPhotoLoading 已定义。如果我将它放在 CardText 中，我可以看到加载器，但在 CardMedia 中同样不起作用。
我意识到我的代码和你的代码之间的区别在于我要么显示加载程序，要么显示照片。在我看来，您正试图同时显示加载程序和空图像。这可能是它不起作用的原因。抱歉，我不能提供更多帮助。
感谢您的纠正。删除空图像后，我现在可以看到加载程序了。
很高兴我能帮上忙。我已将此添加为答案，如果您愿意，请随时接受。

标签： reactjs material-ui

【解决方案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>

【讨论】：

感谢您的回答。如果您认为我的问题有效，请支持我的问题。