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




image typescript (4)

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

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

मैं अपने एंगुलर 2 ऐप में एक इमेज src टैग में अपने एसेट फोल्डर में अपनी एक इमेज के सापेक्ष पथ डालने की कोशिश कर रहा हूं। मैंने अपने घटक में '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

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


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


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

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




path