النهج الصحيح لمسارات الصور في React.js

لقد كان تحديد المسار الصحيح للصور في مشاريع React.js تحديًا شائعًا. تقليديًا، تم استخدام المسارات النسبية ضمن سمة src، استنادًا إلى بنية ملف المشروع. ومع ذلك، في مشاريع React.js المبنية باستخدام create-react-app، قد لا يعمل هذا الأسلوب دائمًا.

يتضح هذا من المثال المقدم، حيث يتم عرض الصور بشكل صحيح عندما يكون المسار "/details/2" " ولكن ليس عندما يكون "/details/2/id." ينشأ هذا عدم الاتساق لأنه يتم تفسير المسار النسبي بناءً على بنية عنوان URL بدلاً من بنية الملف.

لحل هذه المشكلة، يوصى باستخدام طريقة بديلة لتحديد مسارات الصور في مشاريع React.js. بدلاً من استخدام المسارات النسبية في سمة src، يمكن استيراد الصور باستخدام عبارة الاستيراد. على سبيل المثال:

import logo from './logo.png';

class Nav extends Component {
  render() {
    return ();
  }
}

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

تضمن هذه الطريقة أن يظل مسار الصورة متسقًا عبر المسارات المختلفة التي يعالجها React-router، حيث يتم إنشاء المسار النسبي أثناء عملية الاستيراد ولا يعتمد على بنية URL الحالية. ونتيجة لذلك، سيتم عرض جميع الصور بشكل صحيح بغض النظر عن المسار المحدد الذي يتم الوصول إليه.