Img не выражает на странице

Question

Серая часть (ползунок) Мы проверили после загрузки, и данные пришли точно.Мы можем проверить информацию об объекте (ImgURL, Text и т. Д.) В режиме разработки (F12).Но это не выражает.

Вот код шаблона и код скрипта.Спасибо.

<template>
    <div class="home-slider-container" v-if="hasResult">
        <div class="home-slider owl-carousel">
            <div class="home-slide" v-for="(banner, index) in banners">
                <div class="slide-bg owl-lazy" v-bind:data-src=banner.imgUrl></div><!-- End .slide-bg -->
                <div class="home-slide-content container">
                    <div class="row">
                        <div class="col-md-6 offset-md-6 col-lg-5 offset-lg-7">
                            <h4>{{banner.topText}}</h4>
                            <h1>{{banner.middleText}}</h1>
                            <h3><strong>{{banner.bottomText}}</strong></h3>
                            <a href="category.html" class="btn btn-primary">바로 가기</a>
                        </div><!-- End .col-lg-5 -->
                    </div><!-- End .row -->
                </div><!-- End .home-slide-content -->
            </div><!-- End .home-slide -->
        </div><!-- End .home-slider -->
    </div><!-- End .home-slider-container -->
</template>

<script>
    export default {
        name: 'MainHomeSlider',
        data: function () {
            return {
                banners: []
            }
        },
        computed: {
            hasResult: function () {
                return this.banners.length > 0
            }
        },
        created() {
            const baseURI = 'Server API address';
            this.$http.get(`${baseURI}/v1.0/banners`)
                .then((result) => {
                    console.log(result.data.result.banners)
                    console.log(typeof (result.data.result.banners))
                    this.banners = result.data.result.banners
                })
        }
    }
</script>

здесь CSS

.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1;
}
.owl-carousel .owl-stage {
  position: relative;
  -ms-touch-action: pan-Y;
  touch-action: manipulation;
  -moz-backface-visibility: hidden;
  /* fix firefox animation glitch */
}
.owl-carousel .owl-stage:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  /* fix for flashing background */
  -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
}
.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.owl-carousel .owl-item img {
  display: block;
  width: 100%;
}
.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled {
  display: none;
}
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
  cursor: pointer;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next,
.owl-carousel button.owl-dot {
  background: none;
  color: inherit;
  border: 0;
  padding: 0 !important;
  font: inherit;
}
.owl-carousel.owl-loaded {
  display: block;
}
.owl-carousel.owl-loading {
  opacity: 0;
  display: block;
}
.owl-carousel.owl-hidden {
  opacity: 0;
}
.owl-carousel.owl-refresh .owl-item {
  visibility: hidden;
}
.owl-carousel.owl-drag .owl-item {
  touch-action: pan-y;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.owl-carousel.owl-grab {
  cursor: move;
  cursor: grab;
}
.owl-carousel.owl-rtl {
  direction: rtl;
}
.owl-carousel.owl-rtl .owl-item {
  float: right;
}

API запроса: http://www.baekdoo.ga/api/v1.0/banners

структура данных: я проверил, что Img url будет открыт.{"result": {"banner": [{"topText": "Banner test", "middleText": "Banner test", "bottomText": "Banner test", "imgUrl": "ImgURL"}, {"topText ":" Banner test "," middleText ":" Banner test "," bottomText ":" Banner test "," imgUrl ":" ImgURL "}]}," message ":" OK "," status ": 200}

Answer 1

Я не смог найти в вашем CSS, как вы пытаетесь использовать data-src, содержащий URL-адрес изображения, чтобы установить background-image для div. Но если вы пытаетесь использовать функцию CSS attr, это не сработает.

Вместо этого я создал привязку :style для установки URL-адреса изображения. Вы можете проверить в этом коде .

const initData = {"result":{"banners":[{"topText":"Banner test","middleText":"Banner test","bottomText":"Banner test","imgUrl":"https://s3.ap-northeast-2.amazonaws.com/baekdoo/test/1b848efc76a047a5970a04712ca51c46.jpg"},{"topText":"Banner test","middleText":"Banner test","bottomText":"Banner test","imgUrl":"https://s3.ap-northeast-2.amazonaws.com/baekdoo/banner1/5eabca00f6394ee99a5cf8191b1b018f.jpg"}]},"message":"OK","status":200}

new Vue({
	el: "#app",
	data: function () {
		return {
			banners: []
		}
	},
	computed: {
		hasResult: function () {
			return this.banners.length > 0
		}
	},
	methods: {
		imgBG: img => {
			return ({'background-image': `url('${img}')` })
		}
	},
	created() {
		// you API  code here
		this.banners = initData.result.banners
	}
});

.slide-bg {
	width: 100px;
	height: 100px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.owl-carousel {
  // display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1;
}
.owl-carousel .owl-stage {
  position: relative;
  -ms-touch-action: pan-Y;
  touch-action: manipulation;
  -moz-backface-visibility: hidden;
  /* fix firefox animation glitch */
}
.owl-carousel .owl-stage:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.owl-carousel .owl-stage-outer {
  position: relative;
  overflow: hidden;
  /* fix for flashing background */
  -webkit-transform: translate3d(0px, 0px, 0px);
}
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
}
.owl-carousel .owl-item {
  position: relative;
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.owl-carousel .owl-item img {
  display: block;
  width: 100%;
}
.owl-carousel .owl-nav.disabled,
.owl-carousel .owl-dots.disabled {
  display: none;
}
.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-dot {
  cursor: pointer;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next,
.owl-carousel button.owl-dot {
  background: none;
  color: inherit;
  border: 0;
  padding: 0 !important;
  font: inherit;
}
.owl-carousel.owl-loaded {
  display: block;
}
.owl-carousel.owl-loading {
  opacity: 0;
  display: block;
}
.owl-carousel.owl-hidden {
  opacity: 0;
}
.owl-carousel.owl-refresh .owl-item {
  visibility: hidden;
}
.owl-carousel.owl-drag .owl-item {
  touch-action: pan-y;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.owl-carousel.owl-grab {
  cursor: move;
  cursor: grab;
}
.owl-carousel.owl-rtl {
  direction: rtl;
}
.owl-carousel.owl-rtl .owl-item {
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
	   <div class="home-slider-container" v-if="hasResult">
        <div class="home-slider owl-carousel">
            <div class="home-slide" v-for="(banner, index) in banners">
                <div class="slide-bg owl-lazy" :style=imgBG(banner.imgUrl)></div><!-- End .slide-bg -->
                <div class="home-slide-content container">
                    <div class="row">
                        <div class="col-md-6 offset-md-6 col-lg-5 offset-lg-7">
                            <h4>{{banner.topText}}</h4>
                            <h1>{{banner.middleText}}</h1>
                            <h3><strong>{{banner.bottomText}}</strong></h3>
                            <a href="category.html" class="btn btn-primary">바로 가기</a>
                        </div><!-- End .col-lg-5 -->
                    </div><!-- End .row -->
                </div><!-- End .home-slide-content -->
            </div><!-- End .home-slide -->
        </div><!-- End .home-slider -->
    </div><!-- End .home-slider-container -->
</div>