निर्माण-प्रतिक्रिया-एप आयात निर्देशिका के बाहर प्रतिबंध निर्देशिका

Question

मैं create-react-app का उपयोग कर रहा हूं। मैं अपने सार्वजनिक फ़ोल्डर से एक छवि को अपने src/components के अंदर एक फ़ाइल से कॉल करने का प्रयास कर रहा हूं। मुझे यह त्रुटि संदेश प्राप्त हो रहा है।

./src/components/website_index.js मॉड्यूल नहीं मिला: आप आयात ../../public/images/logo/WC-BlackonWhite.jpg जो परियोजना src की के बाहर आता करने का प्रयास किया/निर्देशिका। src/के बाहर संबंधित आयात समर्थित नहीं हैं। आप इसे या तो src/के अंदर ले जा सकते हैं या प्रोजेक्ट के node_modules/से सिम्लिंक जोड़ सकते हैं।

import logo from '../../public/images/logo_2016.png'; <img className="Header-logo" src={logo} alt="Logo" />

मैं कई बातें कह आप पथ के लिए एक आयात कर सकते हैं पढ़ा है लेकिन है कि अभी भी मेरे लिए काम नहीं कर रहा है। किसी भी तरह की सहायता का स्वागत किया जाएगा। मुझे पता है कि इस तरह के कई सवाल हैं लेकिन वे सभी मुझे लोगो या छवि आयात करने के लिए कह रहे हैं, इसलिए मुझे बड़ी तस्वीर में कुछ याद आ रही है।

Answer 1

इस विशेष प्रतिबंध बनाने प्रतिक्रिया-ऐप के डेवलपर्स द्वारा जोड़ा है। फ़ाइलों को src/में रहने के लिए यह सुनिश्चित करने के लिए मॉड्यूलस्कोपप्लगिन में कार्यान्वित किया गया है। वह प्लगइन सुनिश्चित करता है कि ऐप की स्रोत निर्देशिका से सापेक्ष आयात इसके बाहर नहीं पहुंचते हैं।

आप इस सुविधा को अक्षम कर सकते हैं लेकिन केवल eject निर्माण-प्रतिक्रिया-ऐप प्रोजेक्ट के संचालन के बाद ही।

अधिकांश सुविधाएं और इसके अपडेट क्रिएट-रिएक्ट-एप सिस्टम के आंतरिक में छिपे हुए हैं। यदि आप eject बनाते हैं तो आपके पास कुछ सुविधाएं और उसका अपडेट नहीं होगा। इसलिए यदि आप वेबपैक को कॉन्फ़िगर करने के लिए शामिल एप्लिकेशन को प्रबंधित और कॉन्फ़िगर करने के लिए तैयार नहीं हैं और इसी तरह - eject ऑपरेशन न करें।

मौजूदा नियमों (src पर जाएं) द्वारा चलाएं। लेकिन अब आप प्रतिबंध हटा सकते हैं: eject करें और वेबपैक कॉन्फ़िगरेशन फ़ाइल से ModuleScopePlugin हटा दें।

Answer 2

त्रुटि बहुत स्पष्ट है - आपको WC-BlackonWhite.jpg को अपने src निर्देशिका में स्थानांतरित करने की आवश्यकता है। public निर्देशिका स्थैतिक फ़ाइलों के लिए है जो सीधे HTML (जैसे फेविकॉन) में लिंक की जा रही हैं, न कि सामान जो आप सीधे अपने बंडल में आयात करने जा रहे हैं।

Answer 3

अन्य उत्तरों के लिए थोड़ा और जानकारी प्रदान करने के लिए। आपके पास .png फ़ाइल को उपयोगकर्ता को वितरित करने के तरीके के बारे में दो विकल्प हैं। फ़ाइल संरचना आपके द्वारा चुने गए विधि के अनुरूप होना चाहिए। दो विकल्प हैं:

1. मॉड्यूल प्रणाली (import x from y) प्रतिक्रिया से बनाने-ऐप के साथ प्रदान की प्रयोग करें और अपनी जे एस के साथ बंडल। छवि को src फ़ोल्डर के अंदर रखें।

2. इसे public फ़ोल्डर से परोसें और नोड फ़ाइल को सेवा दें। create-react-app भी स्पष्ट रूप से एक पर्यावरण चर के साथ आता है उदा। <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;। इसका मतलब है कि आप इसे अपने रिएक्ट ऐप में संदर्भित कर सकते हैं लेकिन फिर भी यह नोड के माध्यम से काम करता है, आपके ब्राउजर ने इसे सामान्य जीईटी अनुरोध में अलग से पूछने के लिए कहा है।

स्रोत: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-fonts-and-files