angular - 如何将图像放入 Angular2 Material fab 按钮中？

Question

我想在 Angular2 Material 中的 fab 按钮内放置一个图像。如果您在 Google 或 Gmail 中登录，该外观就是该外观。

Angular2 Material 文档对此还没有任何内容。

例如，请看这张图片:http://www.mattpaulson.com/wp-content/uploads/2014/03/gmail-zero.png

我一直在玩的代码(不起作用)是:

    <button md-fab 
        type="button">
        <img md-fab-image [src]="userInfo.photoUrl">
        <div class="md-ripple-container"></div>
    </button>

    <button md-fab 
        type="button">
        <img md-fab-image [src]="userInfo.photoUrl">
    </button>

    <button md-fab md-fab-image
        type="button">
        <img md-fab-image [src]="userInfo.photoUrl">
    </button>

    <button md-icon-button
        type="button">
        <img [src]="userInfo.photoUrl">
    </button>

    <button md-icon-button
        md-fab-image
        type="button">
        <img  [src]="userInfo.photoUrl">
    </button>

    <button md-icon-button md-fab-image
        type="button">
        <img md-fab-image [src]="userInfo.photoUrl">
    </button>

    <button md-icon-button md-fab-image
        type="button">
        <img md-fab-image [src]="userInfo.photoUrl">
    </button>

非理想黑客

    <button md-fab md-button
        style="overflow:hidden;top:1rem;"
        type="button">
        <img [src]="userInfo.photoUrl" style="max-width:100%">
    </button>

Answer 1

您可以使用带有一些额外样式的 button md-fab。

<button md-fab class="image" 
  [style.backgroundImage]="'url(' + YOUR_IMAGE_URL + ')'">
</button>

并添加:

button {
  &.image {
   background-color: transparent;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
  }
}