Reddit의 API에서 게시물과 이미지를 가져 오려고합니다. 각 게시물의 제목을 가져와 내 웹 페이지에 표시 할 수 있으며 URL도 문제없이 가져올 수 있습니다. 내 문제는 각 URL에 대해 이미지를 만들고 싶을 때 어떻게 해야할지 모르겠습니다. 각 게시물에 대해 새 요소를 만들어야합니까, 아니면 현재 "reddit-image"요소를 사용할 수 있습니까? 현재는 최신 게시물의 이미지 만 표시하고 있습니다.
//jshint esversion:6
const apiUrl = "https://www.reddit.com/r/gaming.json";
async function getData (){
const response = await fetch(apiUrl);
const data = await response.json();
const posts = data.data.children;
posts.forEach( function(post){
const redditTitle = document.getElementById("reddit-title");
const redditContainer = document.getElementById("reddit-container");
const redditImage = document.getElementById("reddit-image");
const urlString = post.data.url;
var lastFourLetters = urlString.substring(urlString.length -4);
var lastFiveLetters = urlString.substring(urlString.length -5);
if(lastFourLetters ==".jpg" || lastFiveLetters ==".jpeg"){
if(post.data.thumbnail !="self"){
redditContainer.innerHTML +=post.data.title + "<br>";
redditImage.src=urlString;
}
}
});
}
getData();
이 시도
//jshint esversion:6
const apiUrl = "https://www.reddit.com/r/gaming.json";
async function getData (){
const response = await fetch(apiUrl);
const data = await response.json();
const posts = data.data.children;
posts.forEach( function(post){
const redditTitle = document.getElementById("reddit-title");
const redditContainer = document.getElementById("reddit-container");
const redditImage = document.getElementById("reddit-image");
const urlString = post.data.url;
var lastFourLetters = urlString.substring(urlString.length -4);
var lastFiveLetters = urlString.substring(urlString.length -5);
if(lastFourLetters ==".jpg" || lastFiveLetters ==".jpeg"){
if(post.data.thumbnail !="self"){
redditContainer.innerHTML +=post.data.title + "<br>";
var img = document.createElement('img');
img.src =urlString;
redditContainer .appendChild(img);
}
}
});
}
getData();
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다