Блог

Привет, можете ли вы, пожалуйста, рассказать мне, как добавить фоновое изображение в angular с помощью ngfor класс slide / grid — это carousel.

 <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}}  

Вам нужно использовать правильный атрибут angular для добавления динамического фонового изображения

 <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>
  

Просто добавьте этот стиль в свой html-шаблон в oder, чтобы сделать фоновые изображения динамичными.

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