تعيين صورة خلفية باستخدام أنماط React المضمنة: فهم الفرق بين الصور المضمنة وصور الخلفية المضمنة

عند العمل مع React، قم بتعيين قد يبدو استخدام Hintergrundsbild للأنماط المضمنة أمرًا سهلاً، ولكن هناك بعض الاختلافات الرئيسية بين استخدام علامة المضمنة وتعيين صورة خلفية باستخدام صورة الخلفية الخاصية.

فهم الصور المضمنة

يعد استخدام علامة المضمنة طريقة بسيطة ومباشرة لعرض الصورة. من خلال تعيين سمة src على مسار الصورة، يتم تحميل الصورة وعرضها مباشرة.

الإعداد صور الخلفية ذات الأنماط المضمنة

يتضمن تعيين صورة خلفية باستخدام الأنماط المضمنة استخدام خاصية صورة الخلفية وتوفير عنوان URL للصورة كقيمة. يتمثل الاختلاف الرئيسي هنا في أن خاصية صورة الخلفية تتوقع سلسلة تحتوي على عنوان URL، وليس متغيرًا أو تعبيرًا في JavaScript.

بناء الجملة الصحيح:

const sectionStyle = {
  backgroundImage: `url(${Background})`,
};

في هذا المثال، متغير الخلفية هو بالفعل سلسلة تحتوي على المسار إلى الصورة، وذلك بفضل أدوات مثل حزمة الويب ومحمل ملفات الصور الخاصة بها.

تركيب غير صحيح:

const sectionStyle = {
  backgroundImage: "url("   { Background }   ")", // Incorrect
};

يستخدم البناء غير الصحيح أقواسًا متعرجة حول { الخلفية }، وهو أمر غير ضروري ويمكن أن يؤدي إلى أخطاء.

استخدام قوالب سلسلة ES6

البديل لاستخدام تسلسل السلسلة هو استخدام قوالب سلسلة ES6. وهذا يسمح ببناء جملة أكثر وضوحًا وإيجازًا:

const sectionStyle = {
  backgroundImage: `url(${Background})`,
};

من خلال فهم هذه الاختلافات، يمكنك تعيين صور الخلفية بشكل فعال باستخدام الأنماط المضمنة في React، مما يضمن أن تطبيقك يعرض الصور بشكل صحيح.