图没有在页面上表达

时间：2019-07-11 05:35:29

标签： javascript vue.js axios

Gray part(Slider) 加载后我们进行了检查，数据准确无误。 我们可以在开发模式（F12）下检查对象的信息（ImgURL，文本等）。 但是它没有表达。

这是模板代码和脚本代码。 谢谢。

<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网址是否会打开。 {“结果”： {“横幅”： [{“ topText”：“横幅广告”，“ middleText”：“横幅广告”，“ bottomText”：“横幅广告”，“ imgUrl”：“ ImgURL”}， {“ topText”：“横幅广告”，“ middleText”：“横幅广告”，“ bottomText”：“横幅广告”，“ imgUrl”：“ ImgURL”}]} ，“消息”：“确定”，“状态”：200}

1 个答案:

答案 0 :(得分：0)

我在您的CSS中找不到如何尝试使用包含图像URL的data-src来设置div的背景图像。但是，如果您尝试使用css的函数attr，那么它将无法正常工作。

相反，我创建了一个:style绑定来设置图像URL。您可以签出in this codepen。

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>

相关问题
最新问题