0

السلام عليكم لدى مشكلة فى عرض الصور next js

السلام عليكم تحية طيبة للجميع . اعمل على مشروع 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="" />
يرجى الدخول لحسابك أو تسجيل حساب لتستطيع إضافة تعليق
حساب جديد دخول

التعليقات

0
Mustafa_Suleiman أضف ردا

ربما السبب في المسارات، الأبعاد، تفقد هل مسار للصورة صحيح وأن الصور موجودة بالفعل في المجلد المحدد باستخدام 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.