[Vuejs]-Img doesn't express on page

by

0👍

I couldn’t find in your CSS how you are trying to use the data-src, containing the image URL, to set the div’s background-image. But if you are trying to use the css’s function attr that is not going to work.

Instead of that, I created a :style bind to set the image URL. You can check out 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>

Leave a comment