محمود سعداوي2 نشر 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 اقتباس
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 اقتباس
0 عمر قره محمد نشر 14 يناير 2023 أرسل تقرير نشر 14 يناير 2023 هل تظهر أي رسالة خطأ في الكونسول ؟ هل يمكنك مشاركة ملفات المشروع. 1 اقتباس
0 محمود سعداوي2 نشر 14 يناير 2023 الكاتب أرسل تقرير نشر 14 يناير 2023 بتاريخ 3 دقائق مضت قال عمر قره محمد: هل تظهر أي رسالة خطأ في الكونسول ؟ هل يمكنك مشاركة ملفات المشروع. لا يظهر شيء في الكونسول. تفضل ملف الsrc src.zip 1 اقتباس
0 محمود سعداوي2 نشر 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. هل جذا الفعل يجب أن يكون دائما. اقتباس
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 اقتباس
السؤال
محمود سعداوي2
السلام عليكم.
أواجه مشكل في إستعمال react slick حيث لم يظهر شيء على الشاشة و لم أستطع معرفة مكان الخطأ.
الكود
شكرا لكم.
5 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.