时间戳

首页 > 解决方案 > Firebase图像URL不起作用Angular NgStyle

angular - Firebase图像URL不起作用Angular NgStyle

问题描述

我在通过 firebase 资源图像 URL 渲染图像时遇到了挑战。

模板代码如下：

                <div [ngStyle]="{'background-image': 'url(https://firebasestorage.googleapis.com/v0/b/app.appspot.com/o/images%2Fdownload%20(1)-1573413772018?alt=media&token=6dacb361-c996-4cbf-a672-73ab449e149f
            dgg)', 'background-position': 'center',
            'background-repeat': 'no-repeat',
            'background-size': 'cover'}" class="img-wrapper"></div>

当我在开发工具中检查元素时，background-image没有应用道具

我在这里想念什么？

更新

我已经尝试清理 url 并使用下面的代码

                <div [style.background-image]="sanitizer.bypassSecurityTrustStyle(article.articleImgUrl)" [ngStyle]="{'background-position': 'center',
            'background-repeat': 'no-repeat',
            'background-size': 'cover'}" class="img-wrapper"></div>
            <div class="content-wrapper">

标签： angularfirebasegoogle-cloud-firestore

解决方案

我通过在模板中调用函数让它工作：

[style.background-image]="article.getImageUrl()";

在类文件中，我有一个函数的实现：

const getImageUrl = () => this.sanitizer.bypassSecurityTrustStyle(`url(${articleData.articleImgUrl})`);

推荐阅读