Project (09.20) - travelAnswer 페이지에 한국관광공사 API 적용

 

이제 위와같은 부분을 구현하기 위해서 한국관광공사에서 제공하는 img를 띄우고 싶은데.. 하.............. 초반에 xml 파싱한 부분 참고해서, img를 console에서는 볼 수 있는데

   <img id="displayImage" alt="API로 가져온 이미지" style="width: 300px; height: auto;">

 

body에서 위와같이 입력했을 때

 

위와 같이.... 나온다... 으하하ㅏ 정신나갈거 같아ㅠㅠㅠㅠ 하나하나 하는데 너무 오래걸려ㅜㅜㅠ

 

정신차리고... 일단 사진부터 나오게 해야하는데

 console.log('Image URL:', imageUrl);
 document.getElementById('imageContainer').textContent = imageUrl;

 

script에는 저렇게 적었는데

 

console에는 이미지 url 잘 나오는데 왜 안나오지 으아ㅏ

travelAnswer:480 Error fetching data: TypeError: Cannot set properties of null (setting 'src')
    at travelAnswer:473:60

 

뭐야 개발자 도구 창 열어보니깐 위와 같은 에러가 뜨네 displayImage라는 id를 가진 img 요소가 존재하지 않아서 설정할 수 없다는건데

   <img id="displayImage" alt="API로 가져온 이미지" style="width: 300px; height: auto;">

 

이렇게는 적을 수 없나보다.. 찾아보자

 

---

 

위의 문제도 아닌 javaScript 코드가 img요소보다 위에 위치하고 있어서 발생하는 문제.. script 코드를 img태그 아래에 위치시켜보니 이미지 보임!!

왜 그런지 찾아보니 브라우저는 html을 위에서 아래로 순차적으로 파싱하는데, 만약 javaScript 코드가 html 요소보다 먼저 실행되면, 해당 javaScript는 아직 존재하지 않는 html 요소를 찾으려 할 때 오류가 발생하게 된다고 함 document.getElementById로 먼저 displayImage를 호출하면 null을 반환하게 되는 것 ...

해결 완료!

이제 저 사진을 지역 동 (openAI추천한) 만 여러 장 나올 수 있도록 하고 싶은데 흠냐.. 왜 이런생각을 했지 왜그랬어... 아냐.. 해야지.. 해보자..