2023.6.2
제이쿼리
$('#id').attr('src', '${data["articles"][0]["image"]}')
바닐라자바스크립트
let movPic = document.querySelector("#moviesPic");
movPic.setAttribute("src", `${data["articles"][0]["image"]}`);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>띵동코딩-Fetch 연습</title>
<style>
.wrap {
width: 300px;
margin: auto;
}
.wrap > h1 {
text-align: center;
}
.wrap > button {
display: block;
margin: auto;
margin-bottom: 30px;
}
</style>
<script>
function movieReviews() {
let url = "http://spartacodingclub.shop/post";
let movPic = document.querySelector("#moviesPic");
fetch(url)
.then((res) => res.json())
.then((data) => {
console.log(data);
console.log(data["articles"][0]["image"]);
movPic.setAttribute("src", `${data["articles"][0]["image"]}`);
});
}
</script>
</head>
<body>
<div class="wrap">
<h1>영화 버킷 리스트</h1>
<button onclick="movieReviews()">다음</button>
<div>
<img
id="moviesPic"
width="300"
src="https://ddingdong.spartacodingclub.kr/images/common/logo-tb.svg"
/>
<h2 id="movieTitle"></h2>
<div id="movieComment"></div>
</div>
</div>
</body>
</html>