refactor: replace Next.js Image component with standard img element in Thumbnail for improved performance and compatibility

This commit is contained in:
Julien Froidefond
2025-10-15 03:49:40 +02:00
parent 2be1ff05cd
commit 0f8e73be54

View File

@@ -1,7 +1,6 @@
import type { ThumbnailProps } from "../types";
import { ImageLoader } from "@/components/ui/image-loader";
import { cn } from "@/lib/utils";
import Image from "next/image";
import { forwardRef, useEffect, useState, useCallback, useRef, useImperativeHandle } from "react";
export const Thumbnail = forwardRef<HTMLButtonElement, ThumbnailProps>(
@@ -128,17 +127,14 @@ export const Thumbnail = forwardRef<HTMLButtonElement, ThumbnailProps>(
>
<ImageLoader isLoading={isLoading} />
{imageUrl && !hasError && (
<Image
// eslint-disable-next-line @next/next/no-img-element
<img
src={imageUrl}
alt={`Miniature page ${pageNumber}`}
className={cn(
"object-contain transition-opacity duration-300",
"absolute inset-0 w-full h-full object-contain transition-opacity duration-300",
isLoading ? "opacity-0" : "opacity-100"
)}
fill
sizes="100px"
loading="lazy"
quality={50}
onLoad={handleImageLoad}
onError={handleImageError}
/>