प्रतिक्रिया के साथ छवियाँ आयात करना

परिचय

रिएक्ट के साथ वेब एप्लिकेशन विकसित करते समय, हम आम तौर पर उपयोगकर्ताओं की रुचि को पकड़ने के लिए दृश्य तत्वों को शामिल करना चाहते हैं। ये दृश्य तत्व जेपीजी, पीएनजी, एसवीजी, जीआईएफ और कई अन्य सहित किसी भी प्रकार की छवि हो सकते हैं।

इस लेख में, हम सीखेंगे कि रिएक्ट के साथ छवियों को कैसे आयात किया जाए और इसे प्राप्त करने के विभिन्न तरीकों को देखें।

बाहरी छवियां और स्थानीय छवियां दो प्रकार की छवियां हैं जिन्हें हम अपने रिएक्ट एप्लिकेशन में उपयोग करना चाहते हैं। हम मुख्य रूप से इस लेख में स्थानीय छवियों से चिंतित हैं क्योंकि बाहरी छवियों के लिए हमें उन्हें आयात करने की आवश्यकता नहीं है।

बाहरी छवियां ऐसी छवियां हैं जो पहले से ही बाहरी रूप से होस्ट की जा चुकी हैं और URL के माध्यम से किसी के द्वारा भी एक्सेस की जा सकती हैं, जबकि स्थानीय छवियां ऐसी छवियां हैं जो केवल हमारे स्थानीय कंप्यूटर या प्रोजेक्ट फ़ोल्डर पर उपलब्ध हैं और जिन्हें हम अपने एप्लिकेशन में उपयोग करना चाहते हैं।

बाहरी रूप से होस्ट की गई छवियों को कैसे प्रदर्शित करें

इससे पहले कि हम छवियों को आयात करने के बारे में जानें, यह समझना महत्वपूर्ण है कि कहीं और होस्ट की गई छवियां उसी तरह काम करती हैं जैसे हमने हमेशा HTML में छवियों का उपयोग किया है - इसमें URL जोड़कर src की विशेषता img टैग:

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

आइए अब सीखते हैं कि हम रिएक्ट के साथ (स्थानीय) छवियों को कैसे आयात कर सकते हैं!

प्रतिक्रिया के साथ छवियों को कैसे आयात करें

बाहरी छवियों के अलावा, रिएक्ट में छवियों का उपयोग करने का तरीका अन्य रूपरेखाओं या यहां तक ​​कि HTML से काफी भिन्न होता है। हमारे एप्लिकेशन में उपयोग किए जाने से पहले इन छवियों को पहले रिएक्ट में आयात किया जाना चाहिए।

इसे दो तरीकों से पूरा किया जा सकता है: का उपयोग करके 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.

आवश्यकता () फ़ंक्शन का उपयोग करके प्रतिक्रिया के साथ छवियों को कैसे आयात करें

RSI 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() इस लेख में समारोह।