تعارف
React کے ساتھ ویب ایپلیکیشنز تیار کرتے وقت، ہم عام طور پر صارفین کی دلچسپی کو حاصل کرنے کے لیے بصری عناصر کو شامل کرنا چاہتے ہیں۔ یہ بصری عناصر کسی بھی قسم کی تصویر ہو سکتے ہیں، بشمول JPGs، PNGs، SVGs، GIFs، اور بہت سے دوسرے۔
اس آرٹیکل میں، ہم سیکھیں گے کہ React کے ساتھ تصاویر کو کیسے درآمد کیا جائے اور مختلف طریقوں سے دیکھیں گے کہ یہ کیسے حاصل کیا جا سکتا ہے۔
بیرونی تصاویر اور مقامی تصاویر دو قسم کی تصاویر ہیں جو ہم اپنی React ایپلیکیشن میں استعمال کرنا چاہتے ہیں۔ ہم بنیادی طور پر اس مضمون میں مقامی تصاویر کے بارے میں فکر مند ہیں کیونکہ بیرونی تصاویر کے لیے ہمیں ان کو درآمد کرنے کی ضرورت نہیں ہے۔
بیرونی تصاویر وہ تصاویر ہیں جو پہلے ہی بیرونی طور پر ہوسٹ کی گئی ہیں اور کسی کو بھی یو آر ایل کے ذریعے ان تک رسائی حاصل ہو سکتی ہے، جب کہ مقامی تصاویر وہ تصاویر ہیں جو ہمارے مقامی کمپیوٹر یا پروجیکٹ فولڈر میں صرف ہمارے لیے دستیاب ہیں اور جنہیں ہم اپنی ایپلی کیشن میں استعمال کرنا چاہتے ہیں۔
بیرونی طور پر میزبانی کی گئی تصاویر کو کیسے ڈسپلے کریں۔
اس سے پہلے کہ ہم تصاویر کو درآمد کرنے کے طریقے پر غور کریں، یہ سمجھنا ضروری ہے کہ دوسری جگہوں پر میزبانی کی گئی تصاویر اسی طرح کام کرتی ہیں جس طرح ہم نے ہمیشہ HTML میں تصاویر کا استعمال کیا ہے۔ 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() فنکشن ہم دونوں طریقوں پر جائیں گے۔
کا استعمال کرتے ہوئے رد عمل کے ساتھ امیجز کو کیسے امپورٹ کریں۔ درآمد بیان
کیونکہ اسے پڑھنا اور سمجھنا آسان ہے، import اسٹیٹمنٹ ری ایکٹ میں مقامی طور پر ذخیرہ شدہ تصاویر کو درآمد کرنے کا سب سے عام استعمال شدہ طریقہ ہے۔ تصاویر کے ساتھ سلوک کیا جاتا ہے۔ پہلے سے طے شدہ برآمداتاور جب ہم انہیں درآمد کرتے ہیں، تو ہم اسی طرح کرتے ہیں جس طرح ہم اجزاء درآمد کرتے ہیں۔ یہ فائل سے اس تصویر تک متعلقہ راستے کی وضاحت کرکے کیا جاتا ہے جسے ہم درآمد کر رہے ہیں:
import Logo from './images/react-logo.png';
const App = () => {
return (
<div>
<img src={Logo} alt="React Logo" />
</div>
);
};
اوپر والے کوڈ میں، ہم اب بھی استعمال کرتے ہیں۔ img ٹیگ اور src وصف، لیکن اس بار src انتساب سٹرنگ کے بجائے ایک متغیر حاصل کرتا ہے، جسے JSX میں کرلی منحنی خطوط وحدانی کا استعمال کرتے ہوئے پاس کیا جاتا ہے۔
نوٹ: ہم جتنی تصاویر چاہیں درآمد کر سکتے ہیں، لیکن امپورٹ سٹیٹمنٹ میں ہر تصویر کا ایک منفرد نام ہونا چاہیے، ورنہ اس میں غلطی ہو جائے گی۔
یہ سمجھنا ضروری ہے کہ فائلوں کے لیے متعلقہ راستے کی وضاحت اور حاصل کرنے کا طریقہ؛ بصورت دیگر، کیڑے اور غلطیاں ہو سکتی ہیں۔ پچھلی مثال میں، تصویر کو ایک میں محفوظ کیا گیا تھا۔ /src/images.
ضرورت () فنکشن کا استعمال کرتے ہوئے ری ایکٹ کے ساتھ امیجز کو کیسے امپورٹ کریں۔
۔ 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() اس مضمون میں فنکشن.
