커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
ajax 활용 데이터 image url 바꾸는 방법 차이 (.attr / temp_html ${} )
undefined주차
북마크
박*범
댓글
1
추천
0
조회수
7
조회수
7
답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.


 image url 바꾸는 방법 .attr()과 url 를 변수로 받아 temp_html ${url} 후 append() 하는 방법의 차이가 있는 지 장단점이 있는 지 궁금합니다.

전 수업시간 고양이 랜덤 사진 띄우기때 image url를 바꾸는 방법으로


            $.ajax({

                type: "GET",

                url: "https://api.thecatapi.com/v1/images/search",

                data: {},

                success: function (response) {


                    let catimg = response[0]['url']





                    $('#img-cat').attr("src", catimg)

                }


            })

.attr() 를 활용했는 데 이번 ajax총 복습 시간에는 url를 변수로 받아 다른 데이터들과 똑같이 temp_html 에 ${image}를 받았습니다.

    let rows = response['articles']

                    for(let i = 0; i< rows.length; i++){

                        let comment = rows[i]['comment']

                        let desc = rows[i]['desc']

                        let image = rows[i]['image']

                        let title = rows[i]['title']

                        let url = rows[i]['url']

                   

                     

                     let temp_html = ` <div class="card">

                                            <img class="card-img-top"

                                                src=" ${image}"

                                                alt="Card image cap">

                                            <div class="card-body">

                                                <a href="${url}" class="card-title">${title}</a>

                                                <p class="card-text">${desc}</p>

                                                <p class="card-text comment">${comment}</p>

                                            </div>

                                        </div>`

                                    //    $('.card-img-top').attr("src", image )

                                        $('#cards-box').append(temp_html);

                    }










취소
 공유
취소
댓글 0
댓글 알림
나의얼굴