如何從api獲取影像？

我已經用 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 > 
 <div ><img src="${art.image_urls.square_medium.slice(0,6).replace('i.pximg.net', 'i.pixiv.cat');}" alt="如何從api獲取影像？" ></div>
 <br>
 <span > ${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>

uj5u.com熱心網友回復：

現在您的代碼輸出如下：

{
  "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 >
        <div ><img src="${imgSrc}" alt="如何從api獲取影像？" ></div>
        <br>
        <span > ${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>

標籤：javascript 接口

上一篇：更改來自API的語言相關內容的最佳實踐

下一篇：如何使用githubapi查找用戶名