将缩略图添加到材质 ui 卡答案

【问题标题】：Add thumbnail to material ui card将缩略图添加到材质 ui 卡
【发布时间】：2016-11-25 17:21:53
【问题描述】：

我在我的 react we 应用程序中使用 Material-UI 卡。目前这张卡很平面，有标题。我想在卡片的最左侧和卡片的磁贴旁边有一个缩略图，例如某些应用程序中的歌曲列表。我试过做，但我做不到。有没有办法将图像作为缩略图添加到卡片（最左侧）。我想将缩略图高度与卡片高度匹配，并且缩略图应该从左边缘开始（无边距）。有人可以帮我吗？

这是我当前卡的代码：

render(){  
    return (
        <div>
            <MuiThemeProvider>
                <Card style= {{marginBottom: 2}} 
                      onTouchTap={() => {this.props.handleClick(this.props.id)}}
                      zDepth={this.state.shadow}>
                    <CardHeader
                      style={{fontFamily: 'Roboto, sans-serif', fontWeight:600}}
                        title={this.props.title}
                        //subtitle={value.description}
                        actAsExpander={false}
                        showExpandableButton={false}
                    />
                </Card>
            </MuiThemeProvider>
        </div>
    );
}

【问题讨论】：

你能试试<CardHeader title="URL Avatar" avatar="images/ok-128.jpg" /> 是否可行？否则，您将需要自定义 CSS 解决方案。
头像会给我圆图
将头像img的border-radius设置为0，则为正方形。您还可以调整大小和填充，使其适合您。
你能告诉我如何设置头像的边框半径和填充

标签： javascript css reactjs material-ui

【解决方案1】：

您最好创建自己的组件，或者在您的 leftAvatar 中使用带有方形图像的 List/ListItem：

jsFiddle：https://jsfiddle.net/42f81uvv/1/

<List style={{ width: 400 }}>
  <ListItem
    innerDivStyle={{ paddingLeft: 80 }}
    leftAvatar={
      <img style={{ height: '100%', margin: -16 }} src="https://zartnerds.files.wordpress.com/2015/10/thumbnail.png" />
    }
    primaryText="Some Title"
    secondaryText="That's a good looking thumbnail"
    />
</List>

【讨论】：