Okej, jeżeli chodzi o to API to ono zwraca linki do obrazków w formie JSON, ale i tak widzę że nie działa poprawnie, niżej masz rozwiązanie oparte o dwa inne api, które masz podane w dwóch zmiennych. Nie trzeba nic edytować prócz zmiennych na samej górze i funkcji playerlist(). Jeżeli mówisz, że jesteś początkujący w HTML to ciężko Ci będzie to zrobić, bo musiałbyś nauczyć się JavaScriptu bądź PHP.
Gotowe rozwiązanie dla JavaScripta to
<script>
var ip = "mc.xxx.pl";
var port = "25565"
var rozmiar = 32;
var queryApi = `https://api.minetools.eu/query/${ip}/${port}`;
var pngApi = `https://minotar.net/helm/_USERNAME_/${rozmiar}.png`;
$(document).ready(function() {
queryPlayers();
});
function queryPlayers() {
$.ajax({
url: queryApi,
type: 'GET',
dataType: 'json',
error: function() { console.log('boo!'); },
success: function(data) { playerlist(data.Playerlist) }
});
}
function playerlist(list) {
for (var i = list.length - 1; i >= 0; i--) {
$("#players").append(`<img src=${pngApi.replace('_USERNAME_', list[i])} />`);
}
}
</script>
I funckcja playerlist dodaje do diva #players elementy img dla listy nicków podaną w argumencie. Żeby zadziałało musisz do nagłówka dokumentu html dodać
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
LeviBoyPL odpowiedź w Dodawanie API na stronę został oznaczony jako odpowiedź