圆形图像/轮廓Pic in Ionic 2/3

我试图在轮廓组件中显示圆形/圆形图像。我曾尝试以下approaches.But毫无效果圆形图像/轮廓Pic in Ionic 2/3

1）

<ion-avatar> 
<img [src]="" *ngIf=""/> 
</ion-avatar>

2）

<img class="image"/> 

css 
.image { 
    //its working 
    margin: auto; 
    height: 100px; 
    width: 100px; 
    // border: 2px solid #fff; 
    border-radius: 50%; 
    box-shadow: 0 0 5px gray; 
    display: block; 

    background-image: url('/assets/img/pixels.jpg'); 
}

方法的一个产生这将在下面封闭的平方图像。

请建议一种可能的解决方案。因为每个离子显影剂都是常见的情况。

来源

2017-07-10 Kartiikeya Baleneni

_nothing worked_ ..你的意思是像didnt负荷？你有错误吗？ –

造型不准确.. –

你可以添加一些截图来显示你正在得到什么吗？ –

试试这个：

HTML：

<ion-avatar item-left (click)="entityProfile(gossip.gossip_about.ID)"> 
    <img [src]="gossip.gossip_about.img"> 
</ion-avatar>

SCSS：

ion-avatar img { 
    width: 50px !important; 
    height: 50px !important; 
    border-radius: 50%; 
}

来源

2017-07-10 10:52:13

遵循你的方法。它显示一个方形的图像。 –

这是我的项目中的一段代码。可能是一些其他的CSS压倒一切的问题。检查图像并将上面的CSS放入元素中。 –

我惊喜已经downvoted在我的答案。下面是我清楚得到我的答案。它完全为我工作。

我profile.ts

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 

/* 
    Generated class for the GeneralMyprofile page. 

    See http://ionicframework.com/docs/v2/components/#navigation for more info on 
    Ionic pages and navigation. 
*/ 
@Component({ 
    selector: 'page-general-myprofile', 
    templateUrl: 'general-myprofile.html' 
}) 
export class GeneralMyprofilePage { 

    constructor(public navCtrl: NavController) {} 

    ionViewDidLoad() { 
    console.log('Hello GeneralMyprofilePage Page'); 
    } 

}

我profile.html

<ion-header> 

    <ion-navbar color="accent"> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>My Profile</ion-title> 
    </ion-navbar> 

</ion-header> 


<ion-content padding> 
    <ion-card> 

    <ion-item> 
     <ion-avatar item-start> 
     <img src="assets/img/marty-avatar.png" style="height: 100px; width: 100px;"> 
     </ion-avatar> 
     <h2>Marty McFly</h2> 
     <p>November 5, 1955</p> 
    </ion-item> 

    <img src="img/advance-card-bttf.png"> 

    <ion-card-content> 
     <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! 
     Whoa. This is heavy.</p> 
    </ion-card-content> 

    <ion-row> 
     <ion-col> 
     <button ion-button icon-left clear small> 
     <ion-icon name="thumbs-up"></ion-icon> 
     <div>12 Likes</div> 
     </button> 
     </ion-col> 
     <ion-col> 
     <button ion-button icon-left clear small> 
     <ion-icon name="text"></ion-icon> 
     <div>4 Comments</div> 
     </button> 
     </ion-col> 
     <ion-col center text-center> 
     <ion-note> 
      11h ago 
     </ion-note> 
     </ion-col> 
    </ion-row> 

    </ion-card> 



</ion-content>

结果---我的原始图像具有88px相等的高度和宽度X 88px

自己的形象与不平等的高度和宽度在281px X 256PX原始图像

结果（那么为什么没有为你工作是，你有不平等的高度和宽度）

现在经过我调整你平等的高度和宽度的原始图像的200像素X 200像素

结果

来源

2017-07-10 11:03:16

遵循你的方法。它显示一个方形的图像。 –

尝试新的编辑。 –

相同的输出。平方一个。 –

圆形图像/轮廓Pic in Ionic 2/3

回答

相关问题