WIL(22.11.18) - 이미지 동적 연결 시 require 사용, Swiper 사용법

1.  Vue3

 

 

1) 이번주 배운 내용

- 이미지 불러올 때 require 사용.

<template>
 <img :src="imageurl" />
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
	name: "imagePrac",
    data () {
    	return {
        	imageurl: require("../assets/image/02_feature01_visual.png")
        }
    }
})
</script>

<style>
 img {
 	width: 30vw,
    height: 30vw
 }
</style>

- Swiper 사용

<template>
<!-- partners -->
      <div id="partners" class="partners-wrapper">
        <span class="row justify-center title">
          Partners
        </span>
        <div class="row justify-center hr-wrapper">
          <hr class="row hr" :style="{backgroundImage: 'url(' + hr_url + ')'}">
        </div>
        <div class="row justify-center slide-container" >
          <swiper
            class="row swiper"
            :modules="modules"
            :space-between="30"
            :slides-per-view="6"
            :free-mode="true"
            :autoplay="{
              delay: 3000,
              disableOnInteraction: false
            }"
            :breakpoints="breakpoints3"
          >
            <swiper-slide class="slide" v-for="partner in partners1" :key="partner.id"><img :src="partner.url"></swiper-slide>
          </swiper>
          <swiper
            class="swiper"
            :modules="modules"
            :space-between="30"
            :slides-per-view="6"
            :free-mode="true"
            :autoplay="{
              delay: 3000,
              disableOnInteraction: false
            }"
            :breakpoints="breakpoints3"
          >
            <swiper-slide class="slide" v-for="partner in partners2" :key="partner.id"><img :src="partner.url"></swiper-slide>
          </swiper>
          <swiper
            class="swiper"
            :modules="modules"
            :space-between="30"
            :slides-per-view="6"
            :free-mode="true"
            :autoplay="{
              delay: 3000,
              disableOnInteraction: false
            }"
            :breakpoints="breakpoints3"
          >
            <swiper-slide class="slide" v-for="partner in partners3" :key="partner.id"><img :src="partner.url"></swiper-slide>
          </swiper>
        </div>
      </div>
 </template>
 
 <script>
 import { defineComponent, ref } from 'vue'
 import { Pagination, Scrollbar, A11y, FreeMode, Grid, Autoplay } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/vue';

 import 'swiper/css';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 import 'swiper/css/scrollbar';
 
 
 export default defineComponent({
  name: 'main',
  components: {
    Swiper,
    SwiperSlide
  },
  setup () {
    const rightDrawerOpen = ref(false)
    const onSwiper = (swiper) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log('slide change');
    };
    return {
      onSwiper,
      onSlideChange,
      modules: [ Pagination, Scrollbar, A11y, FreeMode, Grid, Autoplay]
    }
  },
  data () {
  	partners1: [
        {id: 1, url: require('../assets/image/1_01.png')},
        {id: 2, url: require('../assets/image/1_02.png')},
        {id: 3, url: require('../assets/image/1_03.png')},
        {id: 4, url: require('../assets/image/1_04.png')},
        {id: 5, url: require('../assets/image/1_05.png')},
        {id: 6, url: require('../assets/image/1_06.png')},
        {id: 7, url: require('../assets/image/1_07.png')},
        {id: 8, url: require('../assets/image/1_08.png')},
        {id: 9, url: require('../assets/image/1_09.png')},
        {id: 10, url: require('../assets/image/1_10.png')},
        {id: 11, url: require('../assets/image/1_11.png')},
        {id: 12, url: require('../assets/image/1_12.png')},
        {id: 13, url: require('../assets/image/1_13.png')},
        {id: 14, url: require('../assets/image/1_14.png')},
        {id: 15, url: require('../assets/image/1_15.png')},
        {id: 16, url: require('../assets/image/1_16.png')},
        {id: 17, url: require('../assets/image/1_17.png')},
        {id: 18, url: require('../assets/image/1_18.png')},
        {id: 19, url: require('../assets/image/2_01.png')},
        {id: 20, url: require('../assets/image/2_02.png')}
      ],
      breakpoints3: {
        1: {
          slidesPerView: 1,
          centeredSlides: true
        },
        320: {
          slidesPerView: 1,
          centeredSlides: true
        },
        480: {
          slidesPerView: 2,
        },
        768: {
          slidesPerView: 5,
        },
        1024: {
          slidesPerView: 6,
        }
      }
  }
  
})
 </script>
 
<style lang="scss" scoped>
@import "src/css/app.scss";

#partners {
  width: 100%;
  padding-top: 2.5vw;
  background-color: #343A48;
  color: white;
}
#partners .title {
  font-size: 2.5rem;
}

#partners .hr-wrapper {
  width: 100%;
  padding-top: 1vw;
}
#partners hr {
  justify-content: center;
  display: block;
  width: 2.8vw;
}
#partners .slide-container {
  width: 100vw;
  overflow-x: auto;
  padding: 2vw 0 0 4vw;
}
#partners .slide-wrapper {
  width: 13vw;
  display: inline-block;
}
#partners .slide {
  height: 6.5vw;
}
</style>

2) Trouble Shooting

- Swiper, Carousel 사용 시 사용법 정확히 인지할 것.(for문 어디에 써야할 지 주의)