Smugmug API устанавливает миниатюры для альбомов/удаление размытых миниатюр ⇐ Javascript

[Anonymous]

Привет, я в настоящее время кодирую на веб -сайте фотогалереи, и я использую Smumug API, чтобы получить все мои фотографии Pulbic Albums+в альбоме, чтобы отображаться в галерее, и проблема в том, что для галереи показывают альбомы, которые я получаю заполнители. Thunbnails, но когда я нажимаю на IMG, чтобы сделать коробку ViewModel The Img, прекрасно выглядящий. Где я могу найти решение вместо использования AI)
javascript код: < /p>
`async loadAlbums() {
try {
this.isLoading = true;
this.updateLoadingState();

const response = await
axios.get('https://api.smugmug.com/api/v2/user/jds ... phy!albums', {
params: {
APIKey: this.API_KEY,
count: 100,
_expand: 'HighlightImage,HighlightImage.ImageSizes'
},
headers: {
'Accept': 'application/json',
'X-Smug-Version': 'v2'
}
});

if (!response.data.Response || !response.data.Response.Album) {
throw new Error('Invalid albums response');
}

this.albums = response.data.Response.Album.map(album => {
let coverImage = './images/albums/placeholder.jpg';
// In loadAlbums method, update the coverImage selection in the map
function:
coverImage = '';
if (album.HighlightImage && album.HighlightImage.ImageSizes) {
const imageSizes = album.HighlightImage.ImageSizes;
coverImage = imageSizes.LargeImageUrl ||
imageSizes.MediumImageUrl ||
imageSizes.SmallImageUrl ||
album.HighlightImage.ThumbnailUrl;
}

return {
id: album.AlbumKey,
title: album.Title || 'Untitled Album',
imageCount: album.ImageCount || 0,
coverImage
};
});

this.isLoading = false;
this.renderAlbums();
} catch (error) {
console.error('Error loading albums:', error);
this.isLoading = false;
this.updateLoadingState('Error loading albums.');
}
}`

`async loadAlbumImages(albumId) {
try {
this.isLoading = true;
this.updateLoadingState();
const response = await
axios.get(`https://api.smugmug.com/api/v2/album/${albumId}!images`, {
params: {
APIKey: this.API_KEY,
count: 100,
_expand: 'ImageSizes'
},
headers: {
'Accept': 'application/json',
'X-Smug-Version': 'v2',
'X-Smug-ResponseType': 'JSON'
}
});

if (!response.data.Response || !response.data.Response.AlbumImage) {
throw new Error('Invalid album images response structure');
}

const images = response.data.Response.AlbumImage.map(image => {
const imageSizes = image.ImageSizes || {};
return {
id: image.ImageKey,
title: image.Title || image.FileName,

thumbnail: imageSizes.MediumImageUrl ||
imageSizes.SmallImageUrl ||
image.ThumbnailUrl,
// Keeps medium URL for grid view
mediumUrl: imageSizes.MediumImageUrl ||
imageSizes.SmallImageUrl ||
image.ThumbnailUrl,
// Keeps original for maximum quality when needed
originalUrl: image.OriginalUrl || image.ArchivedUri
};
});

this.currentImages = images;
this.isLoading = false;
this.renderImages();

} catch (error) {
console.error('Error loading album images:', error);
this.isLoading = false;
this.updateLoadingState('Error loading album images. Please try again
later.');
}
}`
< /code>
`renderimages () {
const container = document.queryselector ('. grid-albums');
container.innerhtml = ''; < /p>
const placeholder = './images/albums/placeholder.jpg';

this.currentImages.forEach((image, index) => {
const imageElement = document.createElement('div');
imageElement.className = 'image-card';
imageElement.innerHTML = `


loading="lazy"
onerror="this.onerror=null; this.src='${placeholder}';">

${image.title}


`;

imageElement.addEventListener('click', () => {
this.showLightbox(image, index);
});

container.appendChild(imageElement);
});
< /code>
} `< /p>
` renderalbums () {
const container = document.queryselector ('. grid-albums');
container.innerhtml = '' '; // очистить контейнер
const placeholder = './images/albums/placeholder.jpg';

this.albums.forEach(album => {
const albumElement = document.createElement('div');
albumElement.className = 'album-card';
albumElement.innerHTML = `


loading="lazy"
onerror="this.onerror=null; this.src='${placeholder}';">

${album.title}
${album.imageCount} photos


`;

albumElement.addEventListener('click', () => {
window.location.href = `gallery.html?albumId=${album.id}`;
});

container.appendChild(albumElement);
});
< /code>
} `< /p>
img blurry
галерея галерея Thumbnail < /p>
Я попытался получить код, где он получает все размеры для альбомов Thunbnail, и, если самоогасы, не в состоянии, и это не так, как и для того, что он не может быть введен в отставку, и если они не могут быть введены в отставку, и это не так, как и в том, что он не может быть введен в отставку, и, если они не могут быть в состоянии, и, если они не могут быть введены в отставку, и если они не могут быть в состоянии. В качестве окончательного использования The Placeholder.jpg, но я все еще получаю этот Placeholder.jpg, и то же самое было от фактических IMG в альбоме, но миниатюра IMGS все еще размыты

Подробнее здесь: https://stackoverflow.com/questions/797 ... thunbnails