如何在Angular2 Material fab按钮内放置图像？

发布时间：2020-12-17 17:02:40 所属栏目：安全来源：网络整理

导读：我想在Angular2 Material中的fab按钮内放置一个图像. 如果您在Google或Gmail上登录,则会看起来如此. Angular2 Material docs还没有任何内容. 例如,请看这个图像：http://www.mattpaulson.com/wp-content/uploads/2014/03/gmail-zero.png 我一直在玩的代码(不

我想在Angular2 Material中的fab按钮内放置一个图像.
如果您在Google或Gmail上登录,则会看起来如此.

Angular2 Material docs还没有任何内容.

例如,请看这个图像：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>

解决方法

您可以使用：

md-icon-button Circular button with a transparent background,meant to
contain an icon

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

“创建”是https://material.io/icons/的图标
https://material.angular.io/components/component/button

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!