angular - Angular 7从firebase获取图像
问题描述
尝试从 Firestorage 中获取图像,如何在之前添加绝对路径slide.path
或如何检查路径并将其嵌入this.slide
到组件文件中
html
<div class="media text-muted pt-3 pb-3 border-bottom" *ngFor="let slide of slides">
<img [src]="slide.path" class="bd-placeholder-img mr-2 rounded" width="100" height="100" />
<p class="media-body mb-0 small lh-125 border-gray">
<strong class="d-block text-gray-dark">{{ slide.name }}</strong>
</p>
</div>
零件
this.serv.getSlides().subscribe( res => {
this.slides = res.map(item => {
return {
id: item.payload.doc.id,
...item.payload.doc.data()
} as Slides;
});
console.log(this.slides);
});
首创
解决方案
看看下面的代码片段。它使用下载 URL 循环、获取和更新路径属性
return this.afs
.collection('Projects')
.doc(projectId)
.collection('Files')
.valueChanges()
.pipe(
map(files => {
files.forEach(file => {
file.path = this.storage.ref(file.ref).getDownloadURL();
});
return files;
})
);
并且在模板中
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-center" *ngFor="let file of projectFiles">
<div>
<p class="mb-1 file-name">
<i class="far fa-file mr-2"></i>
{{file.name}}
</p>
<p class="mb-0 meta">Uploaded by
<span [appUserName]="file.userId"></span>
<span>, {{(file.createdAt.seconds | amFromUnix)| amTimeAgo}}</span>
</p>
</div>
<div>
<a [href]="file.downloadURL | async" target="_blank" class="btn btn-outline-secondary btn-sm">
<i class="fas fa-cloud-download-alt mr-1"></i>
<span>Download</span>
</a>
</div>
</li>
</ul>
推荐阅读
- javascript - 找到最大的数字并增加 1
- mysql - 您的 SQL 语法有错误(CREATE PROCEDURE)
- c++ - 此 for 循环的 step 子句不是预期的形式
- laravel - 名称为“XXX”的路由不存在 vuerouter
- java - 来自 ArangoDB java 驱动程序的事务无法更改数据库中的任何内容
- r - R:调整条形图上刻度之间的间距
- linux - Azure 应用服务启动命令(必填)
- sql - SQL 查询以获取客户-产品对的最常购买和最近购买的数量
- python - Django Profile 模型未在注册表单中显示 first_name 和 last_name 字段
- python-3.x - 如何在熊猫数据框中的列中用整数替换字符值的行?