API에서 이미지를 가져오는 방법

임의의 고양이 이미지를 표시하는 웹사이트 만들기

API's are really helpful in performing designed function built around sharing data and executing pre-defined processes

웹사이트용 API에서 이미지를 빠르게 가져올 수 있습니다. 우리의 경우 인기 있는 공개 API에서 고양이 이미지를 가져와 웹사이트에 표시합니다.

내가 사용할 API : docs.catapi.com
- thecatapi.com에서 API 키 가져오기

로드api.thecatapi.com/v1/images/searchJSON 응답의 첫 번째 Array 객체 가져오기
.url을 로드합니다.

function fetchPics(){
    let catsImgDiv = document.querySelector(".catsImgDiv")
    catsImgDiv.innerHTML='';
    fetch("https://api.thecatapi.com/v1/images/search") .then(
    (response)=>
     response.json()
    )
}

웹사이트에서 이것을 사용하기 위해 다음을 추가합니다.

클릭 시 새 이미지를 가져오는 버튼
이미지를 표시할 빈 div
.html 파일에서

<button class="btn btn-primary my-4 generate_btn">Generate</button>
<div class="catsImgDiv"></div>

최종 자바스크립트 반복:

function fetchPics(){
    let catsImgDiv = document.querySelector(".catsImgDiv")
    catsImgDiv.innerHTML='';
    fetch("https://api.thecatapi.com/v1/images/search") .then(
    (response)=>
     response.json()
    )
    .then ((data) => {
        let catsImgUrl=data[0].url;
        let catImgEl = document.createElement("img")
        catImgEl.setAttribute('src',`${catsImgUrl}`)
        catImgEl.classList.add("showcase")
        let catsImgDiv = document.querySelector(".catsImgDiv")
        catsImgDiv.appendChild(catImgEl);
    })
    .catch (err=>console.log(err))
}

여기에서 github 페이지로 웹사이트를 설정하는 방법을 찾을 수도 있습니다. Github Pages

홈페이지 : Live
Github : Github