css - 使用 Typescript 在我的 SASS 代码中注入(inject)背景 url ("MyImageHere.png"

Question

我正在尝试使用 Typescript 将图像注入(inject)我的 SASS 代码。我已经让它工作了，但它看起来不像我只使用 SASS 时那样。

这是我原来的sass代码:

{
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    background: url(../../assets/img/advance-card-tmntr.jpg) no-repeat 
    center center/cover;
    opacity: 0.5;
    mix-blend-mode: lighten;
  }

这就是它的样子，这是最终的最终目标。

现在我试着走这条线:

background: url(../../assets/img/advance-card-tmntr.jpg) no-repeat

并将其替换为我的 typescript 文件中的唯一图像 URL，例如 user?.avatar。

我使用以下方法获取要显示的图像:

[style.background]="'url(' + user.avatar + ')'"

但是我无法让图像正确显示。这就是我的“hacky-code”的样子:

关于如何让它工作的任何想法？

Answer 1

您应该使用background-image 而不是background。示例:

HTML文件

<ion-content padding>
    <div class="bg" [style.background-image]="'url('+avatar+')'">    
    </div>
</ion-content>

CSS文件

.bg {
        width: 300px;
        height: 300px;
        border: 1px solid black;
        background-size: cover;
        background-repeat: no-repeat;
}

TS文件

avatar = "http://simpleicon.com/wp-content/uploads/smile-256x256.png";