如何從api獲取圖像？

Question

我已經用 JavaScript 編寫了這個腳本，但我還是個初學者。 我想從名為 square_medium 的字段中的 API 獲取圖像 URL，然后將圖像 URL 中的“i.pximg.net”替換為“i.pixiv.cat”，最后將其限制為僅顯示前 6 張圖像。 我的 javascript 代碼不起作用，所以有人可以幫助糾正我的錯誤嗎？

 const url = 'https://api.adoreanime.com/api/pixiv/?type=member_illust&id=648285&page=1'; var p = []; var y; var i = 0; fetchData(url); function fetchData(url) { fetch(url).then((response) => response.json()).then(function(data) { console.log(data); data.results.forEach((art) => { p[i] = `<div class="card"> <div class="card__image"><img src="${art.image_urls.square_medium.slice(0,6).replace('i.pximg.net', 'i.pixiv.cat');}" alt="image" ></div> <br> <span class="card__title"> ${art.title}</span> </div>`; i++; var x = document.getElementsByClassName('card__wrapper'); var y = p.join(' '); x[0].innerHTML = y; }); }); }

 /*I have used simple CSS to make the cards responsive */ *, *:after, *:before { box-sizing: border-box; } body { background-color: #fff; color: #333; font-family: Tahoma, sans-serif; margin: 0; padding: 0; } a { text-decoration: none; } a:hover { text-decoration: underline; } .card__wrapper { display: flex; margin: 0 auto; padding: 0%; max-width: 1024px; background-color: #ccc; flex-wrap: wrap; flex-direction: row; } .card { background-color: #fff; border-radius: 6px; filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.2)); margin: 10px 10px; padding: 20px; text-align: center; } .card__title { margin-top: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 28px; } .card__cta { padding: 10px 25px; margin: 10px 0px; background-color: #e26d00; font-size: 20px; color: #fff; width: 100%; } .card__cta:hover { background-color: #ffb066; } @media screen and (max-width: 449px) { .card { width: 95%; } } @media screen and (min-width: 450px) and (max-width: 699px) { .card { width: 45.5%; } } @media screen and (min-width: 700px) and (max-width: 1023px) { .card { width: 30.5%; } } @media screen and (min-width: 1024px) { .card { width: 23%; } }

 <section> <main class="card__wrapper"></main> </section>

Answer 1

現在您的代碼輸出如下：

{
  "message": "Uncaught SyntaxError: Missing } in template expression",
  "filename": "https://stacksnippets.net/js",
  "lineno": 107,
  "colno": 39
}

這是一個語法錯誤。 試試下面的固定代碼。

 const url = 'https://api.adoreanime.com/api/pixiv/?type=member_illust&id=648285&page=1'; var p = []; var y; var i = 0; fetchData(url); function fetchData(url) { fetch(url).then((response) => response.json()).then(function(data) { //console.log('data', data); data.illusts.slice(0, 6).forEach((art) => { var imgSrc = art.image_urls.square_medium.replace('i.pximg.net', 'i.pixiv.cat'); p[i] = `<div class="card"> <div class="card__image"><img src="${imgSrc}" alt="image" ></div> <br> <span class="card__title"> ${art.title}</span> </div>`; i++; var x = document.getElementsByClassName('card__wrapper'); var y = p.join(' '); x[0].innerHTML = y; }); }); }

 /*I have used simple CSS to make the cards responsive */ *, *:after, *:before { box-sizing: border-box; } body { background-color: #fff; color: #333; font-family: Tahoma, sans-serif; margin: 0; padding: 0; } a { text-decoration: none; } a:hover { text-decoration: underline; } .card__wrapper { display: flex; margin: 0 auto; padding: 0%; max-width: 1024px; background-color: #ccc; flex-wrap: wrap; flex-direction: row; } .card { background-color: #fff; border-radius: 6px; filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.2)); margin: 10px 10px; padding: 20px; text-align: center; } .card__title { margin-top: 10px; font-family: Arial, Helvetica, sans-serif; font-size: 28px; } .card__cta { padding: 10px 25px; margin: 10px 0px; background-color: #e26d00; font-size: 20px; color: #fff; width: 100%; } .card__cta:hover { background-color: #ffb066; } @media screen and (max-width: 449px) { .card { width: 95%; } } @media screen and (min-width: 450px) and (max-width: 699px) { .card { width: 45.5%; } } @media screen and (min-width: 700px) and (max-width: 1023px) { .card { width: 30.5%; } } @media screen and (min-width: 1024px) { .card { width: 23%; } }

 <section> <main class="card__wrapper"> </main> </section>