fixed loading loop when image not found

This commit is contained in:
Edward Tirado Jr 2026-04-20 23:47:35 -05:00
parent bda565f8c9
commit d3406046ae

View file

@ -75,9 +75,12 @@ const movieSearch = () => {
filteredMovies.value = sortMovies(filtered);
}
const handleImageError = (e: Event, movieId: number) => {
(e.target as HTMLImageElement).src = posterPlaceholder;
imageErrors.value.add(movieId);
const handleImageError = (_e: Event, movieId: number) => {
imageErrors.value = new Set(imageErrors.value).add(movieId);
}
const getPosterSrc = (movie: Movie) => {
return imageErrors.value.has(movie.id) ? posterPlaceholder : movie.poster;
}
const isSortActive = (field: SortField, direction: SortDirection): boolean => {
@ -130,7 +133,7 @@ const isSortActive = (field: SortField, direction: SortDirection): boolean => {
<div class="movie-poster-container">
<NuxtImg
:class="{ 'movie-poster-error': imageErrors.has(movie.id) }"
:src="movie.poster"
:src="getPosterSrc(movie)"
alt=""
class="movie-poster"
loading="lazy"