How to fetch image from api?

I’ve written this script in JavaScript and still a beginner. I want to fetch the … Read more How to fetch image from api?

I’ve written this script in JavaScript and still a beginner. I want to fetch the image url from api in the field called square_medium then replace "i.pximg.net" to "i.pixiv.cat" in the image url and finally limit to display only the first 6 images. My javascript code isn’t working so can anyone help fix my mistakes?

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>

Source: JavaSript – Stack Overflow


Categories: NewsTags: ,

Tags: ,


Leave a Reply

Your email address will not be published. Required fields are marked *