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

عدم ظهور الصورة بالمتصفح باستخدام الخاصية background في css

Abdu Maher

السؤال

السلام عليكم 

عندي مشكلة عدم ظهور الصورة في اي متصفح chrome او Edge او firefox عن طريق الكود ;background: url('/pic/pimg.jpg') no-repeat ولكن تظهر فقط عندما اعرض عن طريق إضافه live server  على VScode كما هو موضح بالصورة واذا ابعدت السلاش /  من بدايه مكان كتابه موقع الصور لاتظهر ايضاَ عن طريق الاضافه ،، وهناك مشاكل اخرى بعدم ظهور بعض البيانات اذا لم استخدم الاضافه مع العلم انني حذفت VScode واعدت تثبيته وحدتث متصفح chrome ولم تنحل المشكلة

رجاءاَ افيدوني تعبت منهها

المشكلة.jpg

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

Recommended Posts

  • 0

يُرجى توضيح هيكلية الملفات في المجلد الذي تعمل عليه، إضغط على أيقونة الملفات في vscode حتى تظهر الهيكلية وقم بأخذ لقطة شاشة توضح الهيكلية بشكل كامل مع مكان تواجد الصورة.

أيضاً يرجى توضيح كود ال css الخاص بتنسيقات الخلفية، و طريقة إستعراضك للمشروع عندما تحدث المُشكلة، أي الرابط الذي تفتحه

غالباً تكون المُشكلة لديك بسبب مسار الصورة حاول إستخدام مسار نسبي يبدأ من ملف التنسيقات وصولاً إلى ملف الصورة:

بفرض أن هيكلية الملفات لديك:

css
   - style.css
img
   - test.png
index.html

في هذه الحالة ستكتب بداخل الدالة url:

url('../img/test.png')

و ../ تعني إصعد من المجلد الحالي للملف إلى المجلد الأب، أي مجلد المشروع ثم أدخل للمجلد img ستجد ملف صورة بالإسم test.png.

و هذا ما أعتقد أنه لديك كهيكلية، أعتقد أنه لديك ملف html في مجلد المشروع بالإضافة لمجلد فيه ملفات css و مجلد فيه الصور، عند تشغيل المشروع عبر الإضافة فهو يبدأ الخادم في المجلد الحاوي لملف html و / تعني ذلك المجلد، بالتالي مسار الصورة يكون صحيح. أما عندما تستعرض المشروع عبر فتح ملف html مباشرةً تُصبح / لا تُعبر عن جذر المشروع بل شيء آخر في ملفات النظام.

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

  • 0
بتاريخ 48 دقائق مضت قال سمير عبود:

يُرجى توضيح هيكلية الملفات في المجلد الذي تعمل عليه، إضغط على أيقونة الملفات في vscode حتى تظهر الهيكلية وقم بأخذ لقطة شاشة توضح الهيكلية بشكل كامل مع مكان تواجد الصورة.

أيضاً يرجى توضيح كود ال css الخاص بتنسيقات الخلفية، و طريقة إستعراضك للمشروع عندما تحدث المُشكلة، أي الرابط الذي تفتحه

جلست ادقق بالموضوع وجدت انه الخلل كله من المسار تبع ملف "css"  فقط عندما اضع ملف "css" بمجلد كما في الصورة لاتعمل الصورة والباقي يعمل طبيعي ولكن اذا اخرجته من المجلد ووضعته بجانب صفحه "html" يشتعل طبيعي بدون مشاكل،،،،واما قصة السلاش "/" وجدت انه من اللازم عدم وضعه في بدايه المسار مما يجعل المتصفح  لايستطيع التعرف على المسار،،،،فهل هناك حل لمشكلة المسار لملف "css"مع العلم ان ملف js  متعرف ومضمن والاكواد شغاله و الصورة داخل مجلد ايضاً،، ويشتغل الكود  ;background: url('pic/pimg.jpg') no-repeat فقط في حاله وضعت "css"  بجانب ملف "html"... هل يوجد حل للمشكلة1548573967_.jpg.cc374cd984955e4347696a5d0345124f.jpg

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

  • 0
بتاريخ 10 دقائق مضت قال Abdu Maher:

جلست ادقق بالموضوع وجدت انه الخلل كله من المسار تبع ملف "css"  فقط عندما اضع ملف "css" بمجلد كما في الصورة لاتعمل الصورة والباقي يعمل طبيعي ولكن اذا اخرجته من المجلد ووضعته بجانب صفحه "html" يشتعل طبيعي بدون مشاكل،،،،واما قصة السلاش "/" وجدت انه من اللازم عدم وضعه في بدايه المسار مما يجعل المتصفح  لايستطيع التعرف على المسار،،،،فهل هناك حل لمشكلة المسار لملف "css"مع العلم ان ملف js  متعرف ومضمن والاكواد شغاله و الصورة داخل مجلد ايضاً،، ويشتغل الكود  ;background: url('pic/pimg.jpg') no-repeat فقط في حاله وضعت "css"  بجانب ملف "html"... هل يوجد حل للمشكلة

لقد عدلت الإجابة السابقة و هي تحوي الحل للمُشكلة فقط عليك تعديل المسار الذي تضعه بداخل الدالة url ليُصبح مساراً نسبياً:

url('../pic/pimg.jpg')
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 4 دقائق مضت قال سمير عبود:

لقد عدلت الإجابة السابقة و هي تحوي الحل للمُشكلة فقط عليك تعديل المسار الذي تضعه بداخل الدالة url ليُصبح مساراً نسبياً:

url('../pic/pimg.jpg')

مشكووووووور اخي تسلم ضبطت معي

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...