اذهب إلى المحتوى
  • 0

خطأ في عرض الصور في React - Gatsby

Adam Ebrahim

السؤال

في الوثائق الرسمية الخاصة بـ Gatsby عرضوا أن يمكن أن أستخدم الصور من خلال CSS بالطريقة العادية كما يحدث في أي مكون React عادي ولكن قمت بتتجربة الكود التالي:
 

.brande {
  background-image: url(./logo.png);
}

ولكن أحصل على الخطأ التالي:

Loader /Users/username/Sites/my-app/node_modules/url/url.js?{"limit":10000,"name":"static/[name].[hash:8].[ext]"} didn't return a function
 @ ./~/css-loader!./~/postcss-loader!./src/layouts/index.css 6:400-435

حاولت تغير مكان الصور ليكون في مجلد src وفي مجلد المشروع نفسه root لكن يظهر نفس الخطأ في كل مرة

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

الخطأ هنا يكمن في أن مسار الصورة الذي تحدده خطأ 

لتلافي مشاكل المسارات مع الصور يمكنك ببساطه إنشاء مجلد "static" في المسار الرئيسي للمشروع وإنشاء مجلد "images" بداخله ليحتوي على الصور الخاصة بالمشروع 

وبالتالي في أي مكان داخل المشروع إذا ما أردت إستخدام صورة يمكنك بكل بساطه القيام بالتالي كمثال

.brand {
  background-image: url('/images/logo.png');
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يبدو أن المشكلة في الوصول إلى الـ loader بداخل مجلد الـ node_modules . 

تأكد أن تقوم بإعادة تثبيت url-loader عن طريق الأمر : 

npm install url-loader --save-dev

ثم قم بإعادة البناء .

و أيضا , قم بالتأكد أنك تقوم بتمرير اللاحقة loader- لكل الـ loaders المعنية على هذا النحو : 

loaders: [
        {
            test: /\.css$/,
            loader: "style-loader!css-loader"
        },
]

و ذلك عوضا عن : 

loaders: [
        {
            test: /\.css$/,
            loader: "style!css"
        },
]

هذا سيقوم بتجنب مشكلة إعتبار style أو css مثلا (دون لاحقة) كالـ module المعني بالعملية في حين أن القائم بالعملية هي الموديلات css-loader و url-loader و هكذا .

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...