圓形圖像/輪廓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

回答

相關問題