Angular2 में छवियों की सेवा कैसे करें?

Question

मैं अपने एसेट फ़ोल्डर में अपने एंग्लूर 2 ऐप में एक इमेज एसकेजी टैग में अपनी एक छवि के सापेक्ष पथ डालने की कोशिश कर रहा हूं। मैंने अपने घटक में 'fullImagePath' में एक चर सेट किया और अपने टेम्पलेट में इसका उपयोग किया। मैंने कई अलग-अलग संभावित रास्तों की कोशिश की है, लेकिन बस अपनी छवि को पाने के लिए प्रतीत नहीं हो सकता। क्या Angular2 में कुछ विशेष पथ है जो हमेशा Django की तरह एक स्थिर फ़ोल्डर के सापेक्ष होता है?

अंग

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css']
})

export class HeroComponent implements OnInit {
  fullImagePath: string;

  constructor() {
    this.fullImagePath = '../../assets/images/therealdealportfoliohero.jpg'
  }

  ngOnInit() {
  }

}

मैंने चित्र को इस घटक के समान फ़ोल्डर में भी रखा है, इसलिए चूंकि टेम्पलेट, और उसी फ़ोल्डर में सीएसएस काम कर रहा है, मुझे यकीन नहीं है कि छवि के समान समान पथ काम नहीं कर रहा है। यह एक ही फ़ोल्डर में छवि के साथ एक ही घटक है।

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css']
})

export class HeroComponent implements OnInit {
  fullImagePath: string;

  constructor() {
    this.fullImagePath = './therealdealportfoliohero.jpg'
  }

  ngOnInit() {
  }

}

एचटीएमएल

<div class="row">
    <div class="col-xs-12">
        <img [src]="fullImagePath">
    </div>
</div>

एप्लिकेशन ट्री * मैंने अंतरिक्ष को बचाने के लिए नोड मॉड्यूल फ़ोल्डर को छोड़ दिया

├── README.md
├── angular-cli.json
├── e2e
│   ├── app.e2e-spec.ts
│   ├── app.po.ts
│   └── tsconfig.json
├── karma.conf.js
├── package.json
├── protractor.conf.js
├── src
│   ├── app
│   │   ├── app.component.css
│   │   ├── app.component.html
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── hero
│   │   │   ├── hero.component.css
│   │   │   ├── hero.component.html
│   │   │   ├── hero.component.spec.ts
│   │   │   ├── hero.component.ts
│   │   │   └── portheropng.png
│   │   ├── index.ts
│   │   └── shared
│   │       └── index.ts
│   ├── assets
│   │   └── images
│   │       └── therealdealportfoliohero.jpg
│   ├── environments
│   │   ├── environment.dev.ts
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.json
│   └── typings.d.ts
└── tslint.json

Comments

आप सापेक्ष पथ का उपयोग क्यों करना चाहते हैं? क्या हम इसे रूट से शुरू करने के लिए सेट नहीं कर सकते (यानी this.fullImagePath = '/assets/images/therealdealportfoliohero.jpg')

— हैरी निन्ह

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

— TJB

हाँ, यह वास्तव में आपके सेटअप पर निर्भर करता है। मेरे लिए, मैं कोड भाग से संपत्ति अलग करता हूं (उनके लिए अलग-अलग गोल कार्य करके) इसलिए मुझे पता चल जाएगा कि संपत्ति कहां हैं।

— हैरी निन्ह

Phwew, अंत में यह हैरी को काम करने के लिए मिला। आप पूर्ण पथ का उपयोग करने के बारे में सही थे। कारण यह काम नहीं कर रहा था एक मुद्दा है कि मैं अतीत में था जब फ़ोटोशॉप का उपयोग कर रहा था, और वहाँ से छवियों को सही ढंग से निर्यात नहीं कर रहा था। अरघघ फोटोशॉपप्प! वैसे भी धन्यवाद हैरी!

— TJB

Answer 1

कोणीय केवल src/assetsफ़ोल्डर को इंगित करता है , url के माध्यम से एक्सेस करने के लिए और कुछ भी सार्वजनिक नहीं है, इसलिए आपको पूर्ण पथ का उपयोग करना चाहिए

 this.fullImagePath = '/assets/images/therealdealportfoliohero.jpg'

या

 this.fullImagePath = 'assets/images/therealdealportfoliohero.jpg'

यह तभी काम करेगा जब बेस href टैग के साथ सेट किया गया हो /

आप डेटा के लिए अन्य फ़ोल्डर भी जोड़ सकते हैं angular/cli। आपको केवल संशोधित करने की आवश्यकता हैangular-cli.json

"assets": [
 "assets",
 "img",
 "favicon.ico",
 ".htaccess"
]

संपादन में ध्यान दें: डिस्ट कमांड संपत्ति से सभी अटैचमेंट को खोजने की कोशिश करेगा, इसलिए छवियों और किसी भी फाइल को जो आप एसेट के अंदर यूआरएल के माध्यम से एक्सेस करना चाहते हैं, को रखना महत्वपूर्ण है, जैसे कि नकली जोंस डेटा फाइलें भी एसेट में होनी चाहिए।

Comments

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

— ज़ीव ग्लेज़र

कोणीय-क्ली ट्रैक के साथ कोणीय परियोजनाएं बनाई गई हैं जहां संपत्ति को .angular-cli.jsonफ़ाइल से परोसा जा सकता है । अधिक जानकारी के लिए @ michal-ambrož उत्तर देखें।

— केविन। गला

धन्यवाद! ... जब आप महीनों के लिए कोणीय के साथ खेल रहे हैं और अचानक आपको पता चलता है कि आपको अभी तक एक भी छवि नहीं जोड़ना है ;-)

— साइमन_वेअर

"यह केवल तभी काम करेगा जब आधार href टैग के साथ सेट किया गया हो / अगर मेरे आधार href को किसी अन्य पथ पर सेटअप करने की आवश्यकता है तो मुझे क्या करना होगा क्योंकि मेरा ऐप सर्वर पर एक उपनिर्देशिका में चलेगा?"

— गिल्स

यह उस डायरेक्टरी में एसेट्स फोल्डर को ढूंढ लेगा जिससे मुझे कोई परेशानी नहीं होगी

— उमर यूनिस

Answer 2

अगर आपको एसेट फोल्डर पसंद नहीं है तो आप अपनी .angular-cli.jsonजरूरत के अन्य फोल्डर को एडिट और एड कर सकते हैं ।

  "assets": [
    "assets",
    "img",
    "favicon.ico"
  ]

Comments

अगर मैं "assets": [ "assets", "assets/images", "favicon.ico" ],इसे जोड़ता हूं तो भी यह काम नहीं करता?

— bielas

Answer 3

अपनी छवि पथ fullPathname='assets/images/therealdealportfoliohero.jpg'को अपने निर्माता में जोड़ें । यह निश्चित रूप से काम करेगा।

Answer 4

मैं एक कोणीय 4 फ्रंट एंड और वेबपैक के साथ Asp.Net कोर कोणीय टेम्प्लेट प्रोजेक्ट का उपयोग कर रहा हूं। मुझे छवि नाम के सामने '/ dist / आस्तियों / छवियों /' का उपयोग करना था, और छवि / संपत्ति निर्देशिका में छवि को सटीक निर्देशिका में संग्रहीत करना था। उदाहरण के लिए:

 <img  class="img-responsive" src="/dist/assets/images/UnitBadge.jpg">

Comments

लेकिन जब आप विकास में होते हैं, तो यह सही काम नहीं करेगा?

— devN

@davaus शायद क्योंकि आपने पहले से ही एक निर्माण किया था इसलिए आपका पुराना 'डिस्ट' वहीं बैठा है। यदि आप एक छवि को अपडेट करते हैं तो यह आपके द्वारा बनाए जाने तक ताज़ा नहीं होने वाली है।

— सिमोन_विवर

यह समझ आता है। धन्यवाद।

— davaus

Answer 5

अपनी छवियों को संपत्ति फ़ोल्डर में रखें, उन्हें अपने htmlपृष्ठों या tsफ़ाइलों में उस लिंक के साथ देखें ।

Answer 6

कोणीय में केवल एक पेज सर्वर से अनुरोध किया जाता है, वह है index.html। और index.html और संपत्ति फ़ोल्डर एक ही निर्देशिका पर हैं। किसी भी कंपोनेंट में इमेज लगाते समय src वैल्यू जैसा दें assets\image.png। यह ठीक काम करेगा क्योंकि ब्राउज़र उस छवि के लिए सर्वर से अनुरोध करेगा और वेबपैक उस छवि की सेवा कर सकेगा।