[영화 검색 사이트] - 포스터 이미지는 어떻게 가져올까?

문제 상황

영화 카드를 만드는 과정 중에서 포스터 이미지가 뜨지 않는 문제를 겪게 되었다

인기영화의 데이터가 담긴 객체를 배열로 만들기, 배열 내에서 원하는 정보만 가져오기까지는 성공했다

영화의 제목과 평점을 가져오는 것에는 문제가 없었는데 영화 이미지만 불러와지는 것이 되지 않았다

 

위의 사진처럼 영화 제목과 평점만 뜨고,

영화 이미지는 alt에 할당한 영화 이미지만 출력됐다

 

도대체 무엇이 문제였을까?

 

 

문제 원인

처음에 작성한 영화의 이미지 경로를 가져오는 코드는 다음과 같다

fetch(url, options)
  .then((res) => res.json())
  .then((data) => {
    const movieList = data.results; // 인기 영화 20개 정보가 담긴 배열

    movieList.forEach((movie) => {
      let movieTitle = movie.title;
      let movieRating = movie.vote_average;
      let movieImage = movie.poster_path;

      console.log(movieImage); // 어떤 값이 출력될까?
    });
  })
  .catch((err) => console.error(err));

 

해당 코드를 실행하면 콘솔에 화면과 같은 값들이 출력된다

 

출력되는 값들이 당연히 url이겠지하고 값을 그대로 넣었던 것이 문제였다

단순히 poster_path만 가져오면 url 형태가 아니기 때문에 이미지를 불러올 수 없다

 

그렇다면 어떻게 해결해야될까?

 

 

문제 해결 과정

경로 앞에 프로토콜, 도메인, 경로를 할당해주면 된다

let movieImage = "https://image.tmdb.org/t/p/w500" + movie.poster_path;

 

 

전체 코드

// 인기 영화 데이터 가져오기
fetch(url, options)
  .then((res) => res.json())
  .then((data) => {
    const movieList = data.results; // 인기 영화 20개 정보가 담긴 배열
    console.log(movieList);

    movieList.forEach((movie) => {
      let movieTitle = movie.title;
      let movieRating = movie.vote_average;
      let movieImage = "https://image.tmdb.org/t/p/w500" + movie.poster_path;
      console.log(movieImage);
    });
  })
  .catch((err) => console.error(err));

 

 

결과

코드를 수정한 결과, 다음과 같이 카드에 포스터 이미지가 들어온 것을 볼 수 있다