[Vue.js][Ch4][영화검색 사이트] 영화 포스터가 없는 경우 예외 처리

영화 포스터가 없는 경우

로딩 이미지가 계속 출력된다.

 

 

 

 

 

 

 

 

 

Console > Elements 에서 background-image를 확인해보면

N/A가 확인된다.

MovieItem.vue. > init 메서드 수정

async init() {
  const poster = this.movie.Poster;

  if (!poster || poster === 'N/A') {          // Poster가 없거나 값이 N/A이면 false 처리
    this.imageLoading = false;                // false 처리
  } else {
    await this.$loadImage(poster);            // 이미지 로딩이 완료되면
    this.imageLoading = false;                // false 처리
  }
}

 

출력

Movie.vue > requestDiffSizeImage 수정

requestDiffSizeImage(url, size = 700) {       // size 기본값 : 700
  if (!url || url === 'N/A') {                // url 없거나 값이 N/A이면 false 처리
    this.imageLoading = false;                // false 처리
    return '';                                // 빈 문자열 반환
  } 
  const src = url.replace('SX300',`SX${size}`);   // 이미지 사이즈를 바꿔서 전송
  this.$loadImage(src)
    .then(() => {
      this.imageLoading = false;
    });
  return src;
}