React.js में छवि पथ के लिए सही दृष्टिकोण
React.js परियोजनाओं में छवियों के लिए सही पथ निर्धारित करना एक आम चुनौती रही है। परंपरागत रूप से, प्रोजेक्ट की फ़ाइल संरचना के आधार पर, src विशेषता के भीतर सापेक्ष पथों का उपयोग किया जाता था। हालाँकि, create-react-app के साथ निर्मित React.js प्रोजेक्ट्स में, यह दृष्टिकोण हमेशा काम नहीं कर सकता है।
यह प्रदान किए गए उदाहरण से स्पष्ट है, जहां मार्ग "/विवरण/2" होने पर छवियां सही ढंग से प्रदर्शित होती हैं "लेकिन तब नहीं जब यह "/विवरण/2/आईडी" हो। यह असंगतता इसलिए उत्पन्न होती है क्योंकि सापेक्ष पथ की व्याख्या फ़ाइल आर्किटेक्चर के बजाय यूआरएल संरचना के आधार पर की जा रही है।
इस समस्या को हल करने के लिए, React.js परियोजनाओं में छवि पथ को परिभाषित करने के लिए एक वैकल्पिक विधि की सिफारिश की जाती है। Src विशेषता में सापेक्ष पथों का उपयोग करने के बजाय, आयात विवरण का उपयोग करके छवियों को आयात किया जा सकता है। उदाहरण के लिए:
import logo from './logo.png'; class Nav extends Component { render() { return (); } }
इस दृष्टिकोण में, आयात विवरण छवि फ़ाइल के सापेक्ष पथ को निर्दिष्ट करता है, और फिर छवि को एक चर के रूप में संग्रहीत किया जाता है। घटक को प्रस्तुत करते समय, इस चर का उपयोग छवि के स्रोत के रूप में किया जाता है।
यह विधि सुनिश्चित करती है कि छवि पथ रिएक्ट-राउटर द्वारा नियंत्रित विभिन्न मार्गों पर सुसंगत रहता है, क्योंकि आयात प्रक्रिया के दौरान सापेक्ष पथ स्थापित होता है और वर्तमान यूआरएल संरचना पर आधारित नहीं है। परिणामस्वरूप, विशिष्ट मार्ग तक पहुंच की परवाह किए बिना सभी छवियां सही ढंग से प्रदर्शित की जाएंगी।
अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।
Copyright© 2022 湘ICP备2022001581号-3