सार्वजनिक फ़ोल्डर में ReactJS और चित्र

Question

ReactJS में Im नया और मैं एक घटक में छवियों को आयात करना चाहता हूं। ये चित्र सार्वजनिक फ़ोल्डर के अंदर हैं और मुझे नहीं पता कि प्रतिक्रिया घटक से फ़ोल्डर का उपयोग कैसे किया जाए।

कोई विचार ?

संपादित करें

मैं बॉटम.जेएस या हेडर.जेएस के अंदर एक छवि आयात करना चाहता हूं

संरचना फ़ोल्डर है:

मैं वेबपैक का उपयोग नहीं करता हूं। क्या मैं ?

संपादित करें २

मैं छवियों और बाकी परिसंपत्तियों को लोड करने के लिए वेबपैक का उपयोग करना चाहता हूं। इसलिए मेरे कॉन्फिग फोल्डर में मेरे पास अगली फाइलें हैं:

मुझे छवियों के पथ जोड़ने की आवश्यकता है और कैसे?

धन्यवाद

Comments

यह फ़ोल्डर सार्वजनिक है क्या? आपकी परियोजना संरचना क्या है? क्या आप वेबपैक के साथ छवियों को बंडल कर रहे हैं या इसे बाहर रखा गया है? आदि आदि प्रसंग प्रसंग

— जोएल हार्कस

@JoelHarkes ने संपादित किया।

— ऐस्कॉनहेलो

ऐसा लगता है कि यह पैक नहीं है। क्या आपने कोशिश की है src="/images/logofooter.png":?

— जोएल हार्कस

क्षमा करें यह प्रश्न के लिए प्रासंगिक नहीं है लेकिन आप किस आइकन थीम का उपयोग करते हैं?

— नर्मिन

Src के भीतर एक फ़ोल्डर बनाने की कोशिश करें, इसमें अपनी संपत्ति को संग्रहीत करें, और रिश्तेदार पथ का उपयोग करके इसे आयात करें। यह कई कारणों से बेहतर है। केवल एक सलाह!

— आदित्य पटनायक

Answer 1

सार्वजनिक रूप से छवियों को संदर्भित करने के लिए दो तरीके हैं जो मुझे पता है कि इसे सीधे आगे कैसे करना है। एक होमम बहरानी से ऊपर की तरह है।

का उपयोग करते हुए

    <img src={process.env.PUBLIC_URL + '/yourPathHere.jpg'} /> 

और चूंकि यह काम करता है, आपको वास्तव में किसी और चीज की जरूरत नहीं है लेकिन, यह भी काम करता है ...

    <img src={window.location.origin + '/yourPathHere.jpg'} />

Comments

यह कंसोल में कोई त्रुटि नहीं दिखा रहा है, लेकिन छवि डिफ़ॉल्ट छवि आइकन के रूप में दिखाई दे रही है जो मैंने आयात नहीं की है। मैंने आपके द्वारा उल्लिखित दोनों मामलों की कोशिश की है। कृपया मेरी मदद करें। धन्यवाद !

— प्रखर मित्तल

Answer 2

इसके लिए आपको किसी वेबपैक विन्यास की आवश्यकता नहीं है।

अपने घटक में बस छवि पथ दें। डिफ़ॉल्ट प्रतिक्रिया से सार्वजनिक निर्देशिका में इसका पता चल जाएगा।

<img src="/image.jpg" alt="image" />

Comments

इसने मेरे लिए काम किया। केवल मैंने सार्वजनिक निर्देशिका में छवियां कॉपी कीं। स्वचालित रूप से पथ को हल किया।

— विनीत भास्करन

और अगर छवियां सार्वजनिक फ़ोल्डर के अंदर कुछ फ़ोल्डर में हैं, तो क्या इसे खोजने के लिए प्रतिक्रिया होगी?

— युवल लेवी

हां @ यवु लेलिव।

— ओलिवर वौयट

यह सबसे अच्छा तरीका है क्योंकि process.env.PUBLIC_URL सापेक्ष मार्ग है और नेस्टेड मार्गों के लिए गलत काम करेगा। उत्तर में निर्दिष्ट स्लैश के साथ शुरू होने वाले निरपेक्ष मार्ग का उपयोग करना सबसे अच्छा है ...

— बरजा स्वारगिरी

Answer 3

प्रतिक्रिया दस्तावेज़ दस्तावेज़ में इसे अच्छी तरह से समझाते हैं, आपको process.env.PUBLIC_URLसार्वजनिक फ़ोल्डर में रखी गई छवियों के साथ उपयोग करना होगा। अधिक जानकारी के लिए यहाँ देखें

return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;

Comments

हाँ, src dir पदानुक्रम के बाहर गतिशील छवियों के लिए। लोगो या पृष्ठभूमि की तरह स्थैतिक, को आयात विधि से पहुँचा जा सकता है।

— जुआन लानुस

इसके अलावा, यह ऐप्स के लिए बनाया गया है जो रिएक्ट ऐप

— eballeste

यह कंसोल में कोई त्रुटि नहीं दिखा रहा है, लेकिन छवि डिफ़ॉल्ट छवि आइकन के रूप में दिखाई दे रही है जो मैंने आयात नहीं की है। कृपया मेरी मदद करें।

— प्रखर मित्तल

Answer 4

1- यदि आप कॉन्फ़िगरेशन के लिए वेबपैक का उपयोग करते हैं तो यह अच्छा है लेकिन आप बस छवि पथ का उपयोग कर सकते हैं और प्रतिक्रिया से पता चलेगा कि यह सार्वजनिक निर्देशिका में है।

<img src="/image.jpg">

2- यदि आप वेबपैक का उपयोग करना चाहते हैं जो कि रिएक्ट में एक मानक अभ्यास है। आप अपने webpack.config.dev.js फ़ाइल में इन नियमों का उपयोग कर सकते हैं।

module: {
  rules: [
    {
      test: /\.(jpe?g|gif|png|svg)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 10000
          }
        }
      ]
    }
  ],
},

फिर आप प्रतिक्रिया घटकों में छवि फ़ाइल आयात कर सकते हैं और इसका उपयोग कर सकते हैं।

import image from '../../public/images/logofooter.png'

<img src={image}/>

Answer 5

अपने जीवन को आसान बनाने के लिए आपको यहां वेबपैक का उपयोग करना चाहिए। अपने कॉन्फ़िगरेशन में नीचे नियम जोड़ें:

const srcPath = path.join(__dirname, '..', 'publicfolder')

const rules = []

const includePaths = [
  srcPath
]
    // handle images
    rules.push({
      test: /\.(png|gif|jpe?g|svg|ico)$/,
      include: includePaths,
      use: [{
        loader: 'file-loader',
        options: {
          name: 'images/[name]-[hash].[ext]'
        }
      }

इसके बाद, आप बस छवियों को अपनी प्रतिक्रिया घटकों में आयात कर सकते हैं:

import myImage from 'publicfolder/images/Image1.png'

नीचे की तरह myImage का उपयोग करें:

<div><img src={myImage}/></div>

या यदि छवि घटक की स्थानीय स्थिति में आयात की जाती है

<div><img src={this.state.myImage}/></div> 

Comments

मुझे संदेह है कि अगर आपको संसाधन के आयात करने में सक्षम होने के लिए वेबपैक की आवश्यकता है।

— सिया

@fshock, मैंने कहा कि इससे कार्य को पूरा करने में आसानी होगी।

— उमेश

@ उमेश मैं इसे वेबपैक के साथ करना पसंद करता हूं। तो आपने कहा कि मुझे config में नियम जोड़ना है लेकिन कौन सी फाइल? मेरे पास path.js, polyfills.js, webpack.config.dev.js, webpack.config.prod.js और webpackDevServer.config.js हैं। मैं प्रश्न को संपादित करने जा रहा हूं ताकि आप सभी संरचना देख सकें। धन्यवाद

— ०३३३ में ऐस्कॉनहेलो ९'१

@Aceconhielo, आपको इसे webpack.config.dev.js और webpack.config.prod.js में शामिल करना चाहिए

— उमेश

Answer 6

हम जानते हैं कि प्रतिक्रिया एसपीए है। सब कुछ जड़ घटक से जेएसएक्स से उपयुक्त एचटीएमएल तक विस्तारित करके प्रदान किया गया है।

तो इससे कोई फर्क नहीं पड़ता कि आप छवियों का उपयोग कहाँ करना चाहते हैं। सबसे अच्छा अभ्यास एक निरपेक्ष पथ (जनता के संदर्भ के साथ) का उपयोग करना है। रिश्तेदार रास्तों के बारे में चिंता मत करो।

आपके मामले में, यह हर जगह काम करना चाहिए:

"./images/logofooter.png"

Answer 7

आप इसका उपयोग भी कर सकते हैं .. यह आपके सार्वजनिक फ़ोल्डर में 'yourimage.jpg' मानकर काम करता है।

<img src={'./yourimage.jpg'}/>