استيراد الصور مع React

المُقدّمة

عند تطوير تطبيقات الويب باستخدام React ، نريد عادةً تضمين عناصر مرئية لجذب اهتمام المستخدمين. يمكن أن تكون هذه العناصر المرئية أي نوع من الصور ، بما في ذلك ملفات JPG و PNG و SVG و GIF وغيرها الكثير.

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

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

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

كيفية عرض الصور المستضافة خارجيًا

قبل أن ندخل في كيفية استيراد الصور ، من المهم أن نفهم أن الصور المستضافة في مكان آخر تعمل بنفس الطريقة التي استخدمنا بها دائمًا الصور في HTML - عن طريق إضافة عنوان URL إلى src سمة من img العلامة:

const App = () => {
   return (
      <div>
         <img src="https://reactjs.org/logo-og.png" alt="React Logo" />
      </div>
   );
};

دعنا الآن نتعلم كيف يمكننا استيراد الصور (المحلية) باستخدام React!

كيفية استيراد الصور باستخدام React

بصرف النظر عن الصور الخارجية ، تختلف طريقة استخدام الصور في React اختلافًا كبيرًا عن تلك الموجودة في الأطر الأخرى أو حتى HTML. يجب أولاً استيراد هذه الصور إلى React قبل استخدامها في تطبيقنا.

يمكن تحقيق ذلك بطريقتين: باستخدام ملف import بيان أو باستخدام require() وظيفة. سنستعرض كلا النهجين.

كيفية استيراد الصور باستخدام React باستخدام ملف استيراد ملخص الحساب

نظرًا لأنه من الأسهل القراءة والفهم ، فإن ملف import العبارة هي الطريقة الأكثر استخدامًا لاستيراد الصور المخزنة محليًا في React. يتم التعامل مع الصور على أنها الصادرات الافتراضية، وعندما نستوردها ، نقوم بذلك بنفس الطريقة التي نستورد بها المكونات. يتم ذلك عن طريق تحديد المسار النسبي من الملف إلى الصورة التي نستوردها:

import Logo from './images/react-logo.png';

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

في الكود أعلاه ، ما زلنا نستخدم امتداد img علامة و src السمة ، ولكن هذه المرة src السمة تتلقى متغيرًا بدلاً من سلسلة ، والتي يتم تمريرها باستخدام الأقواس المتعرجة في JSX.

ملحوظة: يمكننا استيراد العديد من الصور كما نرغب ، ولكن يجب أن يكون لكل صورة اسم فريد في بيان الاستيراد ، وإلا فسيؤدي ذلك إلى ظهور خطأ.

من المهم فهم كيفية تحديد المسارات النسبية للملفات والحصول عليها ؛ خلاف ذلك ، قد تحدث الأخطاء والأخطاء. في المثال السابق ، تم حفظ الصورة بتنسيق /src/images.

كيفية استيراد الصور باستخدام React باستخدام الوظيفة تتطلب ()

• require() الوظيفة هي وظيفة Node.js تُستخدم لتضمين وحدات خارجية من ملفات غير الملف الحالي. إنه يعمل بنفس طريقة عمل ملف import البيان ويسمح لنا بتضمين الصور:

let Logo = require('./images/react-logo.png');

const App = () => {
   return (
      <div>
         <img src={Logo} alt="React Logo" />
      </div>
   );
};

الاختلاف الوحيد هو السطر الأول حيث طلبنا الصورة عبر مسارها النسبي ثم قمنا بتخزينها في متغير وصلنا إليه في img علامة عبر الأقواس المتعرجة.

يمكننا أيضًا أن نقرر القيام بذلك بشكل مضمّن وتجنب السطر الإضافي المستخدم لتعيين الصورة إلى متغير ، لأنه ليس إلزاميًا:

const App = () => {
   return (
      <div>
         <img src={require('./images/react-logo.png')} alt="React Logo" />
      </div>
   );
};

وفي الختام

تعلمنا كيفية استيراد الصور المحلية باستخدام ملف import البيان و require() تعمل في هذه المقالة.