无法从typescript文件中获取img url
无法从typescript文件中获取img url
提问于 2018-08-27 20:22:59
我正在制作一个简单的应用程序在离子，作为功能之一将有一个选项，以显示注册用户的列表，与他们的个人资料图片。他们的头像存储在firebase存储中。
我成功地检索到了配置文件图像的URL，但是当我尝试将它们链接到我的超文本标记语言文件中的<img>时，它似乎不起作用。我得到的网址是有效的，当我尝试复制粘贴到<img>标签时，它是有效的，但我希望它是动态的。
registeredusers.html文件：
<ion-item *ngFor="let profile of profiles">
<ion-avatar item-left> <ion-img [src]="profile.url"> </ion-img> </ion-avatar>
<h2>{{profile.name}}</h2>
<span>{{profile.country}}</span>
<button ion-button (click)="followProfile(profile.name);" outline item-right>Follow</button>
</ion-item>registeredusers.ts文件：
export class RegisteredusersPage {
private profileListRef = this.db.list<Profile>('profile-list');
constructor(
public navCtrl: NavController,
public navParams: NavParams,
private storage: Storage,
private db: AngularFireDatabase,
private toastCtrl: ToastController,
public angularFireAuth: AngularFireAuth
) {}
profiles = [];
firestore = firebase.storage();
ionViewDidLoad() {
console.log('ionViewDidLoad RegisteredusersPage');
this.getProfile();
}
getProfile() {
console.log(this.db.list('profile-list'));
var database = firebase.database();
var ref = database.ref("profile-list");
ref.on('value', this.gotData.bind(this), this.errData.bind(this));
}
async gotData(data) {
console.log(data.val());
var profilesArr = data.val();
var keys = Object.keys(profilesArr);
var that = this;
var array = [];
console.log("profilesArr: " + profilesArr);
for (var i = 0; i < keys.length; i++) {
var k = keys[i];
var profileName = profilesArr[k].name;
var profileCountry = profilesArr[k].country;
var profileEmail = profilesArr[k].email;
let imageName = k + "__" + "profile";
if (profileName && profileCountry && profileEmail && profilesArr[k].email != this.angularFireAuth.auth.currentUser.email) {
const profileImageUrl = await this.firestore.ref().child(profileEmail + "/images/" + imageName).getDownloadURL();
array[i] = profilesArr[k];
profilesArr[k].url = profileImageUrl;
if (profilesArr[k].email != this.angularFireAuth.auth.currentUser.email) {
this.profiles[i] = profilesArr[k];
console.log("profiles[i].url:" + this.profiles[i].url);
}
}
}
console.log(this.profiles);
}里面的{{profile.name}}和{{profile.country}}没有问题，this.profiles[i].url返回了正确的URL，但是我似乎不能从HTML文件中引用它。
我不确定这是否重要，但this是我的页面的外观。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-27 21:54:43
<div class="body table-responsive">
<table class="table-bordered table-striped" style="width:100%; padding: 10px;">
<thead>
<tr>
<th style="width:10%">Image</th>
</tr>
<thead>
<tbody>
<tr *ngFor="let profile of profiles">
<td>
<img [src]="profile.url" class="img-circle">
</td>
</tr>
</tbody>
</table>
</div>Stack Overflow用户
发布于 2018-08-27 20:31:07
您可能需要包含DOMSanitizer类。
constructor(
public sanitizer: DomSanitizer) { }在模板中：
<ion-img [src]="sanitizer.bypassSecurityTrustUrl(profile.url)"> </ion-img>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52039291
复制相关文章
相似问题