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 #15

Merged
tiradoe merged 1 commit from image-loading-error-fix into main 2026-04-21 04:48:33 +00:00
Conversation 0 Commits 1 Files changed 1 +7 -4
1 changed files with 7 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit d3406046ae - Show all commits

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"