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




image typescript (4)

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

मैं अपने एंजुलर 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

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


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

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

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

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




path