, поэтому я пытаюсь создать веб-сайт, который позволит пользователям указывать координаты широты и долготы, чтобы найти пешеходные маршруты в этом районе. Чтобы сделать это, я использую API для поиска туристических троп. Проблема в том, что на некоторых трассах отсутствуют изображения. Поэтому я использовал код ниже, чтобы заполнить в противном случае пустые места, где изображение будет
$('img').on("error", function () {
$(this).attr('src', `https://source.unsplash.com/collection/${244339}`);
});
. Это работает, но оно возвращает одно и то же случайно сгенерированное изображение несколько раз вместо каждого отсутствующего изображения. Поэтому мой вопрос заключается в том, как я могу рандомизировать каждое изображение, чтобы каждый объект в API, в котором отсутствует изображение, получал уникальное изображение. Для дальнейшей помощи я предоставлю свой код html и javascript. Спасибо!
<body>
<input id="lat" placeholder="Enter the latitude of your desired hiking location">
<input id="long" placeholder="Enter the longitude of your desired hiking location">
<button value="send" id="submit" onclick="callApi()">Search</button>
</div>
function callApi() {
let latitude = document.getElementById("lat").value;
let longitude = document.getElementById("long").value;
console.log("latitude: " + latitude);
console.log("longitude: " + longitude);
const url = "https://www.hikingproject.com/data/get-trails?lat=" + latitude + "&lon=" + longitude + "&maxDistance=10&key=**************";
console.log(url);
$.getJSON(url, function (data) {
console.log(data);
console.log(data.trails[0].location);
$.each(data, function (index, trails) {
console.log(trails[2])
let i;
for (i = 0; i < trails.length; ++i) {
let image = data.trails[i].imgMedium;
let name = data.trails[i].name
let stars = data.trails[i].stars
let starvotes = data.trails[i].starVotes
$('.card-columns').append('<div class="card bg-dark text-white"><img class="card-img" src="' + image + '"/><div class="card-img-overlay"> <p class="name">' + name + '</p><p class="stars">' + stars + " stars" + '</p><p class="starvotes">' + starvotes + " votes" + '</p></div></div>');
};
$('img').on("error", function () {
$(this).attr('src', `https://source.unsplash.com/collection/${244339}`);
});
})
});
}