कोणीय परियोजना में छवि (और अन्य संपत्ति) कैसे लोड करें?

Question

मैं एंगुलर के लिए बहुत नया हूं इसलिए मुझे यकीन नहीं है कि यह करने के लिए सबसे अच्छा अभ्यास है।

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

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

में app.component.html(जो मेरे आवेदन की जड़ है), मैंने डाला

<img class="img-responsive" src="assets/images/myimage.png">

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

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

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

Comments

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

— परदीप जैन

निश्चित रूप से एक नाम बेमेल नहीं है, मैंने एक publicफ़ोल्डर बनाने के बाहर समाप्त किया srcऔर छवि को प्रदर्शित करने के साथ<img class="img-responsive" src="../../public/images/myimage.png">

— user3183717

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

— user3183717

अच्छा :) btw को कोई अतिरिक्त सार्वजनिक फ़ोल्डर बनाने की आवश्यकता नहीं है अद्यतित cli में उनके पास पहले से ही समान नाम हैं।

— परदीप जैन

मुझे अन्य एक्सटेंशन वाली फ़ाइलों के साथ एक समान समस्या है (उदाहरण के लिए .sgf) मैं उन फ़ाइलों को होस्ट करना चाहता हूं और उन्हें एप्लिकेशन से लिंक करना चाहता हूं, लेकिन जाहिरा तौर पर उन्हें assetsफ़ोल्डर में डालना पर्याप्त नहीं है। कोई विचार ?

— bvdb

Answer 1

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

Answer 2

अपनी परियोजना में मैं अपने app.component.html में निम्नलिखित वाक्यविन्यास का उपयोग कर रहा हूं:

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

या

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

जब आप किसी प्रॉपर्टी को इंटरपोलेशन का उपयोग कर बाइंड कर रहे हों तो टेम्पलेट अभिव्यक्ति के रूप में उपयोग करें:

<img [src]="imagePath" />

के समान है:

<img src={{imagePath}} />

स्रोत: एनजीएफ 2 एनजीएफआर में एनजीएस आर्क को कैसे बांधें?

Comments

क्या आपका app.component.html और संपत्ति फ़ोल्डर समान स्तर पर है?

— हलील

नहीं, फ़ोल्डर संरचना स्वचालित रूप से बनाई गई है और आपके पास मेरे से समान फ़ोल्डर होने चाहिए: प्रोजेक्ट-फ़ोल्डर \ src \ assests \ और प्रोजेक्ट-फ़ोल्डर \ app \ app.component.html यदि यह मदद करता है तो कृपया आगे बढ़ें।

— मूरानोवा

Answer 3

एंगुलर-क्ली में मूलभूत रूप से बिल्ड ऑप्शंस में एसेट्स फोल्डर शामिल होता है। मुझे यह मुद्दा तब मिला जब मेरी छवियों के नाम में रिक्त स्थान या डैश थे। उदाहरण के लिए :

• 'my-image-name.png' 'myImageName.png' होना चाहिए
• 'my image name.png' 'myImageName.png' होना चाहिए

यदि आप छवि को संपत्ति / आईएमजी फ़ोल्डर में रखते हैं, तो कोड की यह पंक्ति आपके टेम्प्लेट में काम करना चाहिए:

<img alt="My image name" src="./assets/img/myImageName.png">

यदि समस्या बनी रहती है, तो जांचें कि क्या आपकी कोणीय-क्ली कॉन्फिग फ़ाइल और सुनिश्चित करें कि बिल्ड ऑप्शन में आपकी एसेट्स फ़ोल्डर जोड़ी गई है।

Comments

[alt] स्ट्रिंग्स के लिए आवश्यक नहीं है, [] डेटा बाइंडिंग के लिए है।

— chris_r

Answer 4

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

नमूना उदाहरण

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

Comments

src = "आस्तियों / img / klogo.png" और [src] = "" आस्तियों / img / klogo.png 'के बीच क्या अंतर है?

— gdbj

यहाँ @gdbj उत्तर है stackoverflow.com/questions/41426974/…

— mohit uprim

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

— gdbj

थ्रेड का जवाब देने के लिए धन्यवाद mohit। @gdbj मुझे उम्मीद है कि अब तक आप अपने भ्रम को सुलझा चुके थे।

— भुवन महारजन

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

— SilithCrowe

Answer 5

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

Comments

कोणीय-क्लि पुट appऔर assetsफोल्डर के नीचे अलग से srcफोल्डर। (क्षमा करें, मुझे यकीन नहीं है कि मैं फ़ोल्डर संरचना और नामों को कैसे प्रारूपित करूं)

— user3183717

Answer 6

१। इस लाइन को घटक में शीर्ष पर जोड़ें।

declare var require: any

२। इस घटक को अपने घटक वर्ग में जोड़ें।

imgname= require("../images/imgname.png");

3. html पेज पर img src टैग में इस 'imgname' को जोड़ें।

   <img src={{imgname}} alt="">

Comments

यह फ़ाइल पदानुक्रम ट्री के लिए बेहतर है जो सपाट नहीं है।

— chris_r

Answer 7

मेरे लिए "मैं" "छवियाँ" में पूंजी थी। जिसे कोणीय-क्लि भी पसंद नहीं था। इसलिए यह संवेदनशील भी है।

Answer 8

यह हमेशा इस बात पर निर्भर करता है कि आपकी html फ़ाइल कहाँ है जो स्थैतिक संसाधन के पथ को संदर्भित करता है (इस मामले में छवि)।

उदाहरण A:

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yourpage.html

जैसा कि आप देख सकते हैं, yourpage.html रूट (src फ़ोल्डर) से एक फ़ोल्डर दूर है, इस कारण से इसे वापस जाने के लिए एक राशि की आवश्यकता है ../ के लिए फिर आप रूट से छवि पर जा सकते हैं:

<img class="img-responsive" src="../assests/images/myimage.png">

उदाहरण B:

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yoursubmodule
      |__yourpage.html

यहां आपको पेड़ में 2 फ़ोल्डरों द्वारा यू जाना है:

<img class="img-responsive" src="../../assests/images/myimage.png">