2017-03-14 6 views
17

मैं कोणीय के लिए काफी नया हूं इसलिए मुझे यकीन नहीं है कि ऐसा करने का सबसे अच्छा अभ्यास है।कोणीय 2 प्रोजेक्ट में छवि (और अन्य संपत्ति) कैसे लोड करें?

मैंने एक नया ऐप उत्पन्न करने के लिए कोणीय-क्ली और ng new some-project का उपयोग किया।

इसमें "संपत्ति" फ़ोल्डर में एक "छवियों" फ़ोल्डर बनाया है, इसलिए अब मेरी छवियाँ फ़ोल्डर src/assets/images

app.component.html में, मैं डाल

<img class="img-responsive" src="assets/images/myimage.png"> 
(जो अपने आवेदन की जड़ है) है

जब मैं अपने वेब एप्लिकेशन को देखने के लिए ng serve करता हूं, तो छवि प्रदर्शित नहीं होती है।

कोणीय अनुप्रयोग में छवियों को लोड करने का सबसे अच्छा अभ्यास क्या है?

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

+0

हाँ आप कर रहे हैं ठीक है, आप संपत्ति fodler से सही पथ वाक्य रचना दे दी है, आपके नाम बेमेल साथ समस्या हो सकती है, तो देखें कि छवि मौजूद नहीं –

+1

निश्चित रूप से एक नाम नहीं है या मिस्चैच, मैंने 'src' के बाहर 'सार्वजनिक' फ़ोल्डर बनाना और' ' – user3183717

+0

के साथ छवि प्रदर्शित करना समाप्त कर दिया। मेरे वास्तविक छवि फ़ाइल नाम में रिक्त स्थान थे, और किसी भी कारण से कोणीय को यह पसंद नहीं आया। जब मैंने अपनी फ़ाइल नाम से रिक्त स्थान हटा दिए, तो 'संपत्ति/छवियां/myimage.png' ने काम किया। – user3183717

उत्तर

14

मैंने इसे ठीक किया। मेरे वास्तविक छवि फ़ाइल नाम में रिक्त स्थान थे, और किसी भी कारण से कोणीय को यह पसंद नहीं आया। जब मैंने अपनी फ़ाइल नाम से रिक्त स्थान हटा दिए, assets/images/myimage.png काम किया।

5

आम तौर पर "ऐप" आपके आवेदन की जड़ है - क्या आपने app/path/to/assets/img.png को आजमाया है?

+0

कोणीय-क्ली ''src' फ़ोल्डर के नीचे अलग-अलग' ऐप' और 'संपत्ति' फ़ोल्डर्स डाल दें। (क्षमा करें मुझे यकीन नहीं है कि मुझे फ़ोल्डर संरचना और नाम कैसे प्रारूपित करना है) – user3183717

5

अपने प्रोजेक्ट में मैं अपने app.component.html में निम्न सिंटैक्स का उपयोग कर रहा:

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

या

<img src='http://mruanova.com/img/1.jpg' alt='image'> 

उपयोग [स्रोत] एक टेम्पलेट अभिव्यक्ति के रूप में जब आप एक संपत्ति के लिए बाध्यकारी हैं प्रक्षेप का उपयोग कर:

:

<img [src]="imagePath" /> 

रूप में ही है 10

<img src={{imagePath}} /> 

स्रोत: how to bind img src in angular 2 in ngFor?

+0

आप सापेक्ष पथ का उपयोग कर रहे हैं। क्या पूर्ण पथ का उपयोग करना संभव है? – Halil

+0

हां, मैंने अपना जवाब संपादित किया। – mruanova

+0

एक ही स्तर पर your app.component.html और संपत्ति फ़ोल्डर है? – Halil

3

से 5 Angular2 के लिए विशिष्ट होने के नाते, हम नीचे के रूप में बाध्यकारी संपत्ति का उपयोग कर छवि पथ बाध्य कर सकते हैं। छवि पथ एकल उद्धरण चिह्नों से घिरा हुआ है।

नमूना उदाहरण

<img [src]="'assets/img/klogo.png'" alt="image">

+0

src = "assets/img/klogo.png" और [src] = "'assets/img/klogo.png' 'के बीच क्या अंतर है? – gdbj

+0

@gdbj यहां जवाब है https://stackoverflow.com/questions/41426974/whats-better-to-use-in-angular-src-or-src –

+0

इसलिए मूल रूप से, हम मॉडल से जुड़ने के लिए [src] का उपयोग करते हैं अगर हम उस विधि का उपयोग कर स्रोत को बदलने में सक्षम होना चाहते हैं। – gdbj

संबंधित मुद्दे