img :src 쓰는 방법 및 랜덤으로 이미지 출력하기

참고한 블로그

data 만들기

data() {
    return {
      nickname: "",
      desc: "",
      randomProfile: {
        name: require("../assets/profile_img/profile_sc_o.svg"),
      },
      imgList:[
        {name:require("../assets/profile_img/profile_sc_b.svg")},
        {name:require("../assets/profile_img/profile_sc_o.svg")},
        {name:require("../assets/profile_img/profile_sc_p.svg")},
        {name:require("../assets/profile_img/profile_sc_r.svg")},
        {name:require("../assets/profile_img/profile_sc_y.svg")},
        {name:require("../assets/profile_img/profile_sq_b.svg")},
        {name:require("../assets/profile_img/profile_sq_o.svg")},
        {name:require("../assets/profile_img/profile_sq_p.svg")},
        {name:require("../assets/profile_img/profile_sq_r.svg")},
        {name:require("../assets/profile_img/profile_sq_y.svg")},
        {name:require("../assets/profile_img/profile_tr_b.svg")},
        {name:require("../assets/profile_img/profile_tr_o.svg")},
        {name:require("../assets/profile_img/profile_tr_p.svg")},
        {name:require("../assets/profile_img/profile_tr_r.svg")},
        {name:require("../assets/profile_img/profile_tr_y.svg")},
      ]
    };
  },

• 랜덤 이미지를 출력하기 위해 엄청난 양의 이미지 배열을 생성해준다.
• 이때 require를 꼭 붙여주어야 한다. 그 이유는 각 객체의 name에 저장이 되어 있는 것은 단순 String 값이기 때문이다.
• 해당 경로를 import한다는 의미로 require를 사용해야 한다.

랜덤하게 이미지 변환시키는 메소드 만들기

methods:{
    randomImage(){
      let randomNumber = Math.floor(Math.random()*this.imgList.length);
      this.randomProfile = this.imgList[randomNumber];
      console.log(this.randomProfile);
    }
  }

• 랜덤한 index를 받을 randomNumber 선언
• Math.floor()와 Math.random()을 통해 랜덤한 난수 생성 → 배열의 길이만큼 생성
• 이미지의 주소값이 들어있는 imgList에 randomNumber로 접근해서, data값으로 선언해두었던 randomProfile에 주소값 할당

template 작성하기

<div class="profile_img">
      <img :src="randomProfile.name" />
      <button @click="randomImage">
        <img src="../assets/random_btn.svg" class="randomBtn" />
      </button>
    </div>

• img src에 data값을 바인딩하는 방법 → img :src=""
• {{}} 쓰는거 아님
• 처음에 그냥 randomProfile만 했다가 출력이 안됐는데, data imgList 배열 선언 시 name이라는 property에 주소값을 넣어줬으니까 해당 속성에 접근해야됨
• 그래서 randomProfile.name으로 써주었다.