Question

您好，请告诉我如何使用ngfor幻灯片/网格类是轮播添加角度的背景图像。

<div class="slide slick-bg s-bg-1" *ngFor="let movie of nowPlaying" style="https://image.tmdb.org/t/p/w500/{{movie?.poster_path}}">
           
                <div class="slider-inner h-100">
                    <h1 class="slider-text big-title title text-uppercase">{{movie?.title}</h1>
                
                <p data-animation-in="fadeInUp" data-delay-in="1.2">
                    {{movie?.overview}}
                </p>
                 
                </div>
            </div>

.slick-bg { padding: 100px 0 50px;width:100%; background-size: cover;background-position: center center; background-repeat: no-repeat; height: 90vh; position: relative; z-index: 1;}
.s-bg-1 { background-image: url(../images/slider/slider1.jpg); } // need to add this class url here.. https://image.tmdb.org/t/p/w500/{{movie?.poster_path}}

Answer 1

您需要使用正确的角度属性来添加动态背景图片

<div class="slide slick-bg s-bg-1" *ngFor="let movie of nowPlaying" [ngStyle]="{'background-image': 'url(https://image.tmdb.org/t/p/w500/' + movie?.poster_path + ')'}">
    <div class="slider-inner h-100">
        <h1 class="slider-text big-title title text-uppercase">{{movie?.title}}</h1>
        <p data-animation-in="fadeInUp" data-delay-in="1.2">
            {{movie?.overview}}
        </p>
    </div>
</div>

Answer 2

只需将此样式添加到html模板中，即可使背景图片动态化。

<div [ngStyle]="{background: 'url(https://image.tmdb.org/t/p/w500/' + movie?.poster_path +')', width: '200px', height: '150px'"></div>

如何在角度模板中添加背景图像而不是CSS文件

2 个答案: