السلام عليكم تحية طيبة للجميع . اعمل على مشروع next js استخدم Image الخاصة با next لعرض الصورة
ولكن هناك مشكلة ان فى بعض الصور تظهر وبعض الصور لاتظهر وهذا يحدث مع تغير حجم الشاشات
import Image from "next/image";
<Image width={1000} priority height={2000} sizes="(max-width:768px) 100vw,(max-width:1200px) 50vw ,33vw" src={`/images/alboum/${dataimages[numberitem]}`} alt="" />
ربما السبب في المسارات، الأبعاد، تفقد هل مسار للصورة صحيح وأن الصور موجودة بالفعل في المجلد المحدد باستخدام console.log للتحقق من المسار الذي يتم تمريره إلى src.
console.log(`/images/alboum/${dataimages[numberitem]}`);
ثم تأكد من أن الأبعاد المحددة في width و height تتناسب مع الصور الفعلية، وأحيانًا تجد أن الصورة ليس لها طول أو عرض مما يسبب عدم ظهورها، لذا قم بعمل inspect elemnt للصورة في المتصفح وتفقد التنسيقات الخاصة بها.
أيضًا ربما السبب هو إعدادات sizes التي تتوافق مع الشاشات المختلفة.
لذا الأفضل تحديث مكون الصورة إلى التالي:
import Image from 'next/image';
<Image
src={`/images/alboum/${dataimages[numberitem]}`}
alt=""
layout="responsive" // يجعل الصورة تستجيب لحجم الشاشة
objectFit="cover"
sizes="100vw"
priority={false} // تفعيل lazy-loading للصورة
/>
لاحظ قمت بإضافة layout="responsive" لجعل الصورة تستجيب لحجم الشاشة، مما يضمن أن الصورة ستتكيف بشكل صحيح على أحجام الشاشات المختلفة.
أيضًا objectFit="cover" لضمان أن الصورة تتموضع بشكل صحيح في العنصر الأب لها مع الحفاظ على الأبعاد الخاصة بها aspect ratio.
التعليقات