135

मुझे अपनी प्रतिक्रिया परियोजना पर अपनी छवियों के साथ कुछ समस्या है। वास्तव में मुझे हमेशा लगता था कि src विशेषता में सापेक्ष पथ फाइलों की वास्तुकला पर बनाया गया था

यहाँ मेरी फ़ाइलें वास्तुकला:

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
...

हालाँकि मुझे महसूस हुआ कि मार्ग url पर बना है। मेरे एक घटक में (उदाहरण के लिए file1.jsx में) मेरे पास यह है:

localhost/details/2
<img src="../img/myImage.png" /> -> works

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed

इस समस्या को हल करना कैसे संभव है? मैं चाहता हूं कि प्रतिक्रिया-राउटर द्वारा नियंत्रित मार्गों के किसी भी रूप में, सभी छवियों को एक ही पथ के साथ प्रदर्शित किया जा सकता है।

javascript reactjs webpack

— onedkr
स्रोत

1

सीधे छवि को इंगित करें, उपयोग न करें .. / जो भी

— omarjmh

4

आपको उपयोग करने की आवश्यकता है require। अधिक जानकारी के लिए SO पर इस उत्तर को पढ़ें ।

— आज

आशा है कि यह उत्तर आपको स्थानीय छवियों को पुनः प्राप्त

— मोक्ष

73

आप एक रिश्तेदार url का उपयोग कर रहे हैं, जो कि मौजूदा url के सापेक्ष है, न कि फाइल सिस्टम के लिए। आप निरपेक्ष यूआरएल का उपयोग करके इसे हल कर सकते हैं

<img src ="http://localhost:3000/details/img/myImage.png" />

लेकिन यह बहुत अच्छा नहीं है जब आप www.my-domain.bike, या किसी अन्य साइट पर जाते हैं। साइट के रूट डायरेक्टरी के सापेक्ष url का उपयोग करना बेहतर होगा

<img src="/details/img/myImage.png" />

— prekolna
स्रोत

1

धन्यवाद, मैं अन्य (जो दोनों को भ्रमित कर सकता हूं) के लिए /उस पूर्व details(बनाम ./details, आदि) पर जोर दूंगा।

— user1322092

1

मेरे लिए भी यह काम नहीं कर रहा है। मैं उपयोग कर रहा हूँ reactjsके साथ cordovaऔर का उपयोग कर ES5eslint के रूप में

— Jimit पटेल

जबकि यह और क्लेयरैब्लानी के समाधान दोनों काम करते हैं, क्लेयरैब्लानी का वह है जो क्रिएट-रिएक्शन-ऐप डॉक्स की सिफारिश करता है। वे सार्वजनिक facebook.github.io/create-react-app/docs/… पर

— अथिर नुआमी

@ user1322092 सही है। इसे याद रखें /images/popcorn.pngऔर नहीं ./images/popcorn.png। मेरे लिए सभी मार्गों और सामान के साथ काम किया।

— नूमन

335

में create-react-appछवियों के लिए संबंधित पथ काम करने के लिए नहीं है। इसके बजाय, आप एक छवि आयात कर सकते हैं:

import logo from './logo.png' // relative path to image 

class Nav extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={"logo"}/> 
        )  
    }
}

— claireablani
स्रोत

15

उदाहरण के लिए, डायनामिक छवियों के बारे में, एक json फ़ाइल में संदर्भित, क्रिएट-रिएक्शन-ऐप में क्या है?

— जोक

2

@ ज़ोक मुझे लगता है कि आप JSON फ़ाइल से चर का निर्यात करेंगे, चर को अपने घटक में आयात करेंगे। फिर आप इसे हमेशा की तरह संदर्भित कर सकते हैं। उदा। निर्यात const my_src = variable_here, my_file से {my_src} आयात करें, और src = {my_src} आयात करें।

— क्लेयरैब्लानी

1

import './styles/style.less'; **import logo from './styles/images/deadline.png';**मुझे 2 लाइन मॉड्यूल पर त्रुटि मिल रही है जबकि छवि मौजूद नहीं है और पथ सही है।

— हितेंद्र

यदि आप कोर वेबपैक लेखक के तरीकों में से एक पर एक नज़र रखना चाहते हैं, तो इस विधि की भी उत्तरजीविता द्वारा पुष्टि की जाती है । वह यह भी उल्लेख करता है कि जब आप किसी छवि का संदर्भ लेते हैं तो हर बार छवि आयात करने के लिए बबल-प्लगइन-ट्रांसफॉर्म-रिएक्शन-जेएसएक्स-आईएमजी-आयात का उपयोग कर सकते हैं ।

— आंद्रे

2

यह नहीं, यह केवल छवि के मुद्दे को हल करता है, लेकिन पथ के मुद्दे को हल नहीं करता है .. डिमा गेर्शमैन का जवाब किसी भी फ़ाइल img के पथ के लिए वास्तविक प्रतिक्रिया समाधान है या फिर

— सामी

130

यदि आपने अपना प्रोजेक्ट बनाने के लिए create-react-app का उपयोग किया है तो आपका सार्वजनिक फ़ोल्डर पहुंच योग्य है। इसलिए आपको अपने imageफोल्डर को पब्लिक फोल्डर के अंदर जोड़ना होगा ।

सार्वजनिक / images /

<img src="/images/logo.png" />

— रूबेल हसन
स्रोत

मैं एक प्रश्न पूछने वाला था, लेकिन इस उत्तर ने मेरा मुद्दा हल कर दिया !!! उत्तर के रूप में चिह्नित किया जाना चाहिए। धन्यवाद!!! +1

— Si8

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

— जागृति

यह वास्तव में स्थितियों का इलाज करने का एक तेज़ तरीका है, लेकिन यह केवल तभी काम करेगा जब आपको सापेक्ष URL की आवश्यकता न हो। उदाहरण के लिए, यदि आप अपने ऐप की सेवा करते हैं www.example.com/react-app, तो सार्वजनिक फ़ोल्डर www.example.com पर, बिना उजागर हो जाएगा react-app। यह परेशानी भरा हो सकता है, इसलिए स्वीकृत उत्तर सही है। स्रोत: संपत्ति जोड़ना और सार्वजनिक फ़ोल्डर का उपयोग करना

— अलेक्जेंड्रू पिरवु

44

साथ create-react-appहोती है सार्वजनिक फ़ोल्डर (साथ index.html ...)। यदि आप अपना "myImage.png" वहां रखते हैं , तो img सब-फोल्डर के तहत कहें , तो आप उन्हें इसके माध्यम से एक्सेस कर सकते हैं:

<img src={window.location.origin + '/img/myImage.png'} />

— दीमा जी
स्रोत

4

इसे सही उत्तर के रूप में चिह्नित किया जाना चाहिए, क्योंकि यह वास्तव में किसी भी फाइल के सभी प्रकार के रास्तों के लिए अभिक्रिया समाधान है

— सामी

मुझे समझ नहीं आता कि आपको क्यों लगता है कि यह सही उत्तर है। मैंने सिर्फ इस जवाब की कोशिश की और क्लेरीब्लेनी के जवाब और क्लेयर के जवाब ने काम किया जबकि ऐसा नहीं हुआ। यह उत्तर केवल तभी काम करता है जब छवि सार्वजनिक फ़ोल्डर में हो। क्या मेरी छवियों को सार्वजनिक फ़ोल्डर में जाना चाहिए? @Sami

— Maderas

हाँ @ मादरेस की पहली बात यह है कि यह उत्तर उसी तरह से स्वीकार किया जाता है जैसे => सिर्फ {} और आधार url को हटाकर आप बस src = '/ / image का सापेक्ष पथ' या src = 'image का पूर्ण पथ' का उपयोग कर सकते हैं। उत्तर यह है कि यह किसी भी छवि के लिए परिवर्तनशील मार्ग को समायोजित करता है

— सामी

अब तक मेरे लिए एक आकर्षण की तरह काम करता है। और कुछ नहीं किया! और मैंने हर चीज के बारे में कोशिश की। धन्यवाद!

— मारिया कैंपबेल

32

Src (/ src / images) के अंदर एक इमेज फोल्डर बनाएं और उसमें अपनी इमेज रखें। फिर इस छवि को अपने घटक में आयात करें (अपने रिश्तेदार पथ का उपयोग करें)। नीचे की तरह-

import imageSrc from './images/image-name.jpg';

और फिर अपने घटक में।

<img title="my-img" src={imageSrc} alt="my-img" />
दूसरा तरीका यह है कि छवियों को सार्वजनिक फ़ोल्डर में रखें और उन्हें सापेक्ष पथ का उपयोग करके आयात करें। इसके लिए पब्लिक फोल्डर में एक इमेज फोल्डर बनाएं और उसमें अपनी इमेज रखें। और फिर अपने घटक में इसे नीचे की तरह उपयोग करें।

<img title="my-img" src='/images/my-image.jpg' alt="my-img" />

दोनों विधि काम करती है लेकिन पहले एक की सिफारिश की जाती है क्योंकि इसके क्लीनर का तरीका और छवियां बिल्ड टाइम के दौरान वेबपैक द्वारा नियंत्रित की जाती हैं।

— मुस्तकीम के
स्रोत

2

इसने मेरी मदद की :)

— राफेल

यह काम नहीं करेगा, रिश्तेदार पथ को इंगित करने के लिए शुरुआत में एक स्लैश (/) आवश्यक है, जैसे: "/images/pitbull-mark.png"

— जेरेमी री

क्या आपने उत्तर में वर्णित एक कोशिश की है? इस पर भी काम होना चाहिए।

— मुस्तकीम के

26

मेरे मामले में निम्नलिखित कोड भी काम करता है।

<img src={require('../logo.png')} alt="logo" className="brand-logo"/>

— सोढ़ी साब
स्रोत

1

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

— Mr_LinDowsMac

13

कुछ पुराने जवाब काम नहीं करेंगे, अन्य अच्छे हैं, लेकिन सारांश में विषय की व्याख्या नहीं करेंगे:

यदि छवि 'सार्वजनिक' निर्देशिका में है

उदाहरण: \public\charts\a.png

Html में:

<img id="imglogo" src="/charts/logo.svg" />

जावास्क्रिप्ट में:

गतिशील रूप से नए img में छवि बनाएं:

var img1 = document.createElement("img");  
img1.src = 'charts/a.png';

आईडी के साथ मौजूदा img में 'img1' के रूप में छवि को गतिशील रूप से सेट करें:

document.getElementById('img1').src = 'charts/a.png';

यदि छवि 'src' निर्देशिका में है:

उदाहरण: \src\logo.svg

जावास्क्रिप्ट में:

import logo from './logo.svg';  
img1.src = logo;

Jsx में:

<img src={logo} />

— मनोहर रेड्डी पोरेड्डी
स्रोत

3

फ़ाइल-लोडर npm को webpack.config.js में जोड़ना जैसे इसके आधिकारिक उपयोग के निर्देश:

config.module.rules.push(
    {
        test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'file-loader',
                options: {}
            }
        ]
    }
);

मेरे लिए काम किया।

— ट्रीफ़िश झांग
स्रोत

3

अपने घटक में छवियाँ आयात करें

import RecentProjectImage_3 from '../../asset/image/recent-projects/latest_news_3.jpg'

और छवि के नाम को छवि पर src = {हाल ही के ProjectImage_3} पर ऑब्जेक्ट के रूप में कॉल करें

 <Img src={RecentProjectImage_3} alt="" />

— मो। राणा
स्रोत

2

एक मित्र ने मुझे दिखाया कि यह कैसे करना है:

"./" तब काम करता है जब फ़ाइल छवि का अनुरोध करती है (जैसे, "example.js") फ़ोल्डर ट्री संरचना में फ़ोल्डर "चित्र" के समान स्तर पर है।

— AdamJSim
स्रोत

1

अपने सार्वजनिक फ़ोल्डर में उदाहरण के लिए सार्वजनिक / img / logo.png के तहत लोगो रखें और फिर सार्वजनिक फ़ोल्डर को% PUBLIC_URL% के रूप में देखें:

<img src="%PUBLIC_URL%/img/logo.png"/>

उपरोक्त PUBLIC_URL% का उपयोग publicबिल्ड के दौरान फ़ोल्डर के URL से बदल दिया जाएगा । केवल फाइलों के अंदरpublic फ़ोल्डर के को HTML से संदर्भित किया जा सकता है।

"/Img/logo.png" या "logo.png" के विपरीत, "% PUBLIC_URL% / img / logo.png" क्लाइंट-साइड रूटिंग और एक गैर-रूट सार्वजनिक URL दोनों के साथ सही ढंग से काम करेगा। गैर-रूट सार्वजनिक URL को चलाकर कॉन्फ़िगर करना सीखें npm run build।

— सामी स्टार्ट
स्रोत

React.js पर img के लिए सही रास्ता

यदि छवि 'सार्वजनिक' निर्देशिका में है

यदि छवि 'src' निर्देशिका में है: