使用css中的*ngFor元素设置图像背景

Question

我是web开发人员的新手，正在尝试在不使用<img>的情况下使用从Contenful内容中获得的图像作为div中的封面图像。如果我在html文件中将其设置为<img>标记的[src]，效果会很好，但就我所见，将其用作img标记：<img [src]="blogPost.fields.featuredImage.fields.file.url" alt="">force给了我使用带有css文件样式的div得到的大小和样式：

background: url('/assets/img/landscape3.jpg') center 50% fixed no-repeat;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-size: cover;
height: 50vh;
padding-top: 15rem;

上面我使用了与contentful上相同的图像，但当我用src-url从电脑加载它时，它看起来更像我想要的比例和大小。

但由于我想要的图像来自*ngFor块：*ngFor="let blogPost of blogPosts.items"我不知道如何在不使用<img>标签的情况下将其设置为div的背景图像这是我使用的代码：

<mat-grid-list cols="4" gutterSize="1rem" rowHeight="4:3.5" class="main"
*ngIf="blogPosts$ | async as blogPosts">
<div *ngFor="let blogPost of blogPosts.items">
<mat-grid-tile *ngIf="blogPost.fields.category === 'Science & 
Tech'">
<div class="tile">
<div class="title"><p>{{ blogPost.fields.title }}</p></div>
<img [src]="blogPost.fields.featuredImage.fields.file.url" alt="">

</div>
</mat-grid-tile>

这是我想要尝试的：

<mat-grid-list cols="4" gutterSize="1rem" rowHeight="4:3.5" class="main"
*ngIf="blogPosts$ | async as blogPosts">
<div class="for" *ngFor="let blogPost of blogPosts.items">
<mat-grid-tile *ngIf="blogPost.fields.category === 'Science & Tech'">
<div class="tile">
<div class="title"><p>{{ blogPost.fields.title }}</p></div>
<div class="img"></div>


</div>
</mat-grid-tile>

css：

.img {
margin-top: 0px;
background: url('blogPost.fields.featuredImage.fields.file.url') center 
50% fixed no-repeat;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-size: cover center 50% fixed no-repeat;}

那么，有可能在我的css文件中使用im geting im my html*ngFor资源吗？或者，当有其他方法时，我问的问题是正确的？

Answer 1

您可以使用img类将blogPost.fields.featuredImage.fields.file.url属性绑定到div的内联样式背景。以下HTML代码适用于您：

<mat-grid-list cols="4" gutterSize="1rem" rowHeight="4:3.5" class="main" *ngIf="blogPosts$ | async as blogPosts">
<div class="for" *ngFor="let blogPost of blogPosts.items">
<mat-grid-tile *ngIf="blogPost.fields.category === 'Science & Tech'">
<div class="tile">
<div class="title">
<p>{{ blogPost.fields.title }}</p>
</div>
<div class="img" [style.background]="'url(' + blogPost.fields.featuredImage.fields.file.url + ') center 50% fixed no-repeat'"></div>
</div>
</mat-grid-tile>
</div>
</mat-grid-list>

Answer 2

您可以为此使用内联样式。这些是通过HTML标记属性赋予元素的样式属性。

你应该在你的风格中提供一个默认的或回退的图像，并用这样的内联风格覆盖它：

div {
display: inline-block;
margin: 0.5em;
height: 200px;
width: 200px;
background-color: teal;
background-repeat: no-repeat;
background-size: cover;
}

<div>Default background color</div>
<div style="background-image: url('https://i.stack.imgur.com/roCfw.jpg');">Dynamic background image</div>

Answer 3

将指令与内联CSS、角度样式结合使用

<mat-grid-list cols="4" gutterSize="1rem" rowHeight="4:3.5" class="main"
*ngIf="blogPosts$ | async as blogPosts">
<div *ngFor="let blogPost of blogPosts.items">
<mat-grid-tile *ngIf="blogPost.fields.category === 'Science & 
Tech'">
<div class="tile">
<div class="title" [bgImage]="blogPost.fields.featuredImage.fields.file.url">
<p>{{ blogPost.fields.title }}</p>
</div>
</div>
</mat-grid-tile>

@Directive({
selector: '[bgImage]'
})
export class BgImageDirective {
@Input() bgImage?: string;
@HostBinding('style.background-image')
private get finalImageUrl() {
return this.sanitizer.bypassSecurityTrustStyle(
'url(' + (this.bgImage ?? '') + ') center 50% fixed no-repeat'
);
}
constructor(
private sanitizer: DomSanitizer
) {}
}