محمود_سعداوي نشر 14 يناير 2023 أرسل تقرير مشاركة نشر 14 يناير 2023 السلام عليكم. أواجه مشكل في إستعمال react slick حيث لم يظهر شيء على الشاشة و لم أستطع معرفة مكان الخطأ. الكود import Slider from "react-slick"; import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import React from 'react' function Banner() { const bannerImgs = [ { id : 1, src : '../../images/banner/img-1.jpg' }, { id : 2, src : '../../images/banner/img-2.jpg' }, { id : 3, src : '../../images/banner/img-3.jpg' }, { id : 4, src : '../../images/banner/img-4.jpg' }, { id : 5, src : '../../images/banner/img-5.jpg' }, { id : 6, src : '../../images/banner/img-6.jpg' }, ] const settings = { dots: true, lazyLoad: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1, initialSlide: 2 }; return ( <div className="banner"> <Slider {...settings} > { bannerImgs.map(banner => ( <div key={banner.id}> <img src={banner.src} alt="" /> </div> )) } </Slider> </div> ) } export default Banner شكرا لكم. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 14 يناير 2023 أرسل تقرير مشاركة نشر 14 يناير 2023 المشكلة هي انك وضعت ملف الصور في الملف src والصحيح ان يكون في الملف public، قم بنقل ملف الصور images إلى الملف public : ثم قم بتعديل روابط الصور إلى الشكل : const bannerImgs = [ { id: 1, src: "images/banner/img-1.jpg", }, { id: 2, src: "images/banner/img-2.jpg", }, { id: 3, src: "images/banner/img-3.jpg", }, { id: 4, src: "images/banner/img-4.jpg", }, { id: 5, src: "images/banner/img-5.jpg", }, { id: 6, src: "images/banner/img-6.jpg", }, ]; وبعدها يجب ان يعمل الكود. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 14 يناير 2023 أرسل تقرير مشاركة نشر 14 يناير 2023 هل تظهر أي رسالة خطأ في الكونسول ؟ هل يمكنك مشاركة ملفات المشروع. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 14 يناير 2023 الكاتب أرسل تقرير مشاركة نشر 14 يناير 2023 بتاريخ 3 دقائق مضت قال عمر قره محمد: هل تظهر أي رسالة خطأ في الكونسول ؟ هل يمكنك مشاركة ملفات المشروع. لا يظهر شيء في الكونسول. تفضل ملف الsrc src.zip 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 14 يناير 2023 الكاتب أرسل تقرير مشاركة نشر 14 يناير 2023 بتاريخ 7 دقائق مضت قال عمر قره محمد: المشكلة هي انك وضعت ملف الصور في الملف src والصحيح ان يكون في الملف public، قم بنقل ملف الصور images إلى الملف public : ثم قم بتعديل روابط الصور إلى الشكل : const bannerImgs = [ { id: 1, src: "images/banner/img-1.jpg", }, { id: 2, src: "images/banner/img-2.jpg", }, { id: 3, src: "images/banner/img-3.jpg", }, { id: 4, src: "images/banner/img-4.jpg", }, { id: 5, src: "images/banner/img-5.jpg", }, { id: 6, src: "images/banner/img-6.jpg", }, ]; وبعدها يجب ان يعمل الكود. لماذا وجب وضع الصور ي public. هل جذا الفعل يجب أن يكون دائما. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 14 يناير 2023 أرسل تقرير مشاركة نشر 14 يناير 2023 بتاريخ الآن قال محمود سعداوي: لماذا وجب وضع الصور ي public. هل جذا الفعل يجب أن يكون دائما. هنالك طريقتين معروفتين لاستيراد الصور في رياكت، الأولى هي وضع الصور في ملف الـ src ومن ثم استيراد الصور داخل الصفحات واستخدامها مثل : import React from 'react'; import logo from './logo.png'; // استيراد الصورة هنا function Header() { // استخدام الصورة هنا return <img src={logo} alt="Logo" />; } export default Header; والطريقة الثانية هي التي شرحتها لك في التعليق السابق. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمود_سعداوي
السلام عليكم.
أواجه مشكل في إستعمال react slick حيث لم يظهر شيء على الشاشة و لم أستطع معرفة مكان الخطأ.
الكود
شكرا لكم.
رابط هذا التعليق
شارك على الشبكات الإجتماعية
5 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.