如何将图像放入 Angular2 Material fab 按钮中？答案

【问题标题】：How do you put an image inside of an Angular2 Material fab button?如何将图像放入 Angular2 Material fab 按钮中？
【发布时间】：2017-03-11 00:51:34
【问题描述】：

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

【问题讨论】：

标签： angular angular-material

【解决方案1】：

你可以使用：

mat-icon-button 带有透明背景的圆形按钮，用于包含一个图标

<button (click)="onEditBtnClick(row)" mat-icon-button color="accent"> 
    <mat-icon>create</mat-icon>
</button>

“create”是来自https://material.io/icons/ 的图标 https://material.angular.io/components/component/button

【讨论】：

【解决方案2】：

您可以使用 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;
  }
}

【讨论】：

【解决方案3】：

src 是属性而不是事件

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

【讨论】：

我认为userInfo.photoUrl 有问题，请确保它的值正确。
我只是假设 md-fab-image 有效...它来自 Material1...。不确定它是否存在于最新的 Material...
我正在获取图像.. 但它是一个大胖方块。它不在工厂按钮内。涟漪效应是存在的，但只是在小圆圈上，而不是在上面覆盖的大方形图像......

【解决方案4】：

我建议使用material design md-icon如下，可以用material icons来玩

<button md-raised-button><md-icon>home</md-icon>Some Button</button>

<button md-fab><md-icon>home</md-icon></button>

<button md-mini-fab><md-icon>list</md-icon></button>

<md-icon> </md-icon> 内链接的任何短语都假定是图标的代码。

注意：常用的bootstrap glyphicons，font awesome正在开发中。

LIVE DEMO

【讨论】：

【解决方案5】：

类似的东西也可以工作

<button mat-mini-fab 
    style="background: url('../assets/logo.png') center no-repeat>
</button>

【讨论】：