AngularJS: Swiper.js 不显示背景图片

Question

我正在尝试将 swiper.js 集成到我的 angularJs 显示背景图像的网络应用程序中。库正在运行，但图像未正确显示。请查看与我的应用程序完全一样工作的插件。

在最相关的部分下方：

<!-- Slider main container -->
    <div class="swiper-container" swiper>
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
            <!-- Slides -->
            <!--<div class="swiper-slide">Slide 1</div>-->
            <!--<div class="swiper-slide">Slide 2</div>-->
            <!--<div class="swiper-slide">Slide 3</div>-->

            <div class="swiper-slide" ng-repeat="boatPhoto in boatPhotos" is-loaded>                    
                    <div style="margin:auto; background-image: url('//s3-eu-west-1.amazonaws.com/yanpy.dev/img/boats/13620/l/{{boatPhoto.name}}.{{boatPhoto.mime}}')">
                    </div>
              </div>                
        </div>
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- If we need scrollbar -->
        <div class="swiper-scrollbar"></div>
    </div>

Answer 1

您需要设置 div 的宽度和高度。

<div style="margin:auto;width:100%;height:100%; background-image: url('//s3-eu-west-1.amazonaws.com/yanpy.dev/img/boats/13620/l/{{boatPhoto.name}}.{{boatPhoto.mime}}')">
     Hola
</div>

Updated plnkr demo

AngularJS: Swiper.js 不显示背景图片

AngularJS: Swiper.js not showing background images

angularjs

swiperjs