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

현재 Movie 페이지에 뜨는 포스터 이미지는 그다지 화질이 좋지 않다.

개발자 도구의 Select 메뉴로 poster를 선택해보면 Styles 부분에 이미지의 절대경로가 뜬다.

이걸 클릭해서 들어가면 이런식으로 조금 작은 사이즈의 포스터가 나오는 것을 볼 수 있다.

이 때 주소의 끝부분을 보면 ~~~SX300.PNG라고 되어있는데 이를 700으로 바꿔주면 다음과 같이 사이즈가 커진다.

따라서 우리는 영화 포스터를 요청할 때 300이 아닌 700을 요청하면 더 높은 화질의 포스터를 얻을 수 있다.

 

참조) AWS Lambda@edge로 실시간 이미지 리사이징(updated) | HEROPY

AWS Lambda@edge로 실시간 이미지 리사이징(updated)

 

실시간 이미지 리사이징 적용하기

/src/routes/Movie.vue

다음의 메소드를 추가한다.

포스터 출력부에 메소드를 적용한다.

기존

변경

여기서 두번째 인수를 넣지 않는 이유는 size = 700이라고 디폴트 값을 정의했기 때문이다.

결과

선-명