tiradoe/movie-night-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed loading loop when image not found

Browse source
This commit is contained in:
Edward Tirado Jr 2026-04-20 23:47:35 -05:00
parent bda565f8c9
commit d3406046ae
1 changed files with 7 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

11
app/components/movie-list.vue
View file

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