[Vue.js][Ch4][영화검색 사이트] 더 높은 해상도의 영화 포스터 가져오기

포스터 이미지의 화질이 저해상도이다.

 

 

 

 

 

 

 

 

 

 

 

 

 

고해상도의 포스터 이미지를 출력해보자.

1. 포스터 이미지 선택 > Open in new tab > 주소 부분 확인

2. 주소 URL 확인

https://m.media-amazon.com/images/M/MV5BMjA0YjYyZGMtN2U0Ni00YmY4LWJkZTItYTMyMjY3NGYyMTJkXkEyXkFqcGdeQXVyNDg4NjY5OTQ@._V1_SX300.jpg

3. 주소 끝에 SX300 -> SX700 으로 변경해보면

고해상도의 이미지를 확인할 수 있다.

 

 

 

 

 

 

 

 

 

 

4. Movie.vue > 이미지 url을 SX300 -> SX'원하는 이미지 사이즈'로 변경하는 메소드 생성

methods: {
	requestDiffSizeImage(url, size = 700) {     // size 기본값 : 700
  		return url.replace('SX300',`SX${size}`);  // 이미지 사이즈를 바꿔서 전송
	}
}

5. 포스터 이미지 태그에 4번 메소드 사용

<div
    :style="{ backgroundImage: `url(${requestDiffSizeImage(theMovie.Poster)})` }" 
    class="poster"></div>

출력

 

 

 

! 구글에 실시간 이미지 라사이징 검색 > https://heropy.blog/2019/07/21/resizing-images-cloudfrount-lambda/ 이동 > 참고