Angular 4 Img src가 작동하지 않습니다.

Angular 4 Img src가 작동하지 않습니다.

---

각도 4의 이미지 src에 문제가 있습니다. 이미지를 찾을 수 없다는 메시지가 계속 표시됩니다.

폴더 구조 : 여기

mycomponent에서 이미지를 사용하고 있습니다. 내 구성 요소에 직접 삽입하면

<img src="img/myimage.png"

잘 작동하지만 html을 확인하고 해시를 생성합니다. 그러나 내 이미지는 목록의 일부이기 때문에 html에 동적으로 추가해야합니다. 그래서 내가 사용한다면 :

<img src="{{imagePath}}">

기본적으로 "img / myimage.png"는 작동하지 않습니다. 내가 사용한다면

<img [src]="imagePath">

찾을 수 없음 (htttps : //localhost/img/myimage.png)이라고 표시됩니다. 도와주세요?

---

AngularJS

<img ng-src="{{imagePath}}">

모난

<img [src]="imagePath">

---

자산 폴더에 이미지를 복사하십시오. Angular는 자산 폴더의 이미지 및 구성 파일과 같은 정적 파일에만 액세스 할 수 있습니다.

다음과 같이 시도하십시오. <img src="assets/img/myimage.png">

---

자산 폴더 아래에 이미지 폴더 만들기

<img src="assets/images/logo_poster.png">

---

구성 요소에서 다음과 같은 변수를 할당하십시오.

export class AppComponent {
  netImage:any = "../assets/network.jpg";
  title = 'app';
}

src에서이 netImage를 사용하여 아래와 같이 이미지를 가져옵니다.

<figure class="figure">
  <img [src]="netImage" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

---

@Annk는 __component.ts 파일에서 변수를 만들 수 있습니다.

myImage : string = " http://example.com/path/image.png ";

__. component.html 파일 내에서 다음 세 가지 방법 중 하나를 사용할 수 있습니다.

1 .

<div> <img src="{{myImage}}"> </div>

2.

<div> <img [src]="myImage"/> </div>

삼 .

<div> <img bind-src="myImage"/> </div>

---

문제는 어떻게 든 변수에 의해 src에 삽입되었을 때 경로가 인식되지 않는다는 것입니다. 다음과 같은 변수를 만들어야했습니다.

path : any = require ( "../../ img / myImage.png");

그런 다음 src에서 사용할 수 있습니다. 모두 감사합니다!

---

<img src="images/no-record-found.png" width="50%" height="50%"/>

이미지 폴더와 index.html은 동일한 디렉토리에 있어야합니다 (다음 디렉토리 구조를 따르십시오). 빌드 후에도 작동합니다.

디렉토리 구조

-src
    |-images
    |-index.html
    |-app 

---

Angular는 자산 폴더의 이미지 및 구성 파일과 같은 정적 파일에만 액세스 할 수 있습니다. 원격 저장된 이미지의 문자열 경로를 다운로드하고 템플릿에로드하는 좋은 방법입니다.

  public concateInnerHTML(path: string): string {
     if(path){
        let front = "<img class='d-block' src='";
        let back = "' alt='slide'>";
        let result = front + path + back;
        return result;
     }
     return null;
  }

In a Component imlement DoCheck interface and past in it formula for database. Data base query is only a sample.

ngDoCheck(): void {
   this.concatedPathName = this.concateInnerHTML(database.query('src'));
}

And in html tamplate <div [innerHtml]="concatedPathName"></div>

---

You have to mention the width for the image as default

 <img width="300" src="assets/company_logo.png">

its working for me based on all other alternate way.

---

An important observation on how Angular 2, 2+ attribute bindings work.

The issue with [src]="imagePath" not working while the following do:

• <img src="img/myimage.png">
• <img src={{imagePath}}>

Is due your binding declaration, [src]="imagePath" is directly binded to Component's this.imagePath or if it's part of an ngFor loop, then *each.imagePath.

However, on the other two working options, you're either binding a string on HTML or allowing HTML to be binded to a variable that's yet to be defined.

HTML will not throw any error if you bind <img src=garbage*Th_i$.ngs>, however Angular will.

My recommendation is to use an inline-if in case the variable might not be defined, such as <img [src]="!!imagePath ? imagePath : 'urlString'">, which can be though of as node.src = imagePath ? imagePath : 'something'.

Avoid binding to possible missing variables or make good use of *ngIf in that element.

---

Try This:

<img class="img-responsive" src="assets/img/google-body-ads.png">

---

Check in your.angular-cli.json under app -> assets:[] if you have included assets folder.

Or perhaps something here: https://github.com/angular/angular-cli/issues/2231, can help.

---

You must use this code in angular to add the image path. if your images are under assets folder then.

<img src="../assets/images/logo.png" id="banner-logo" alt="Landing Page"/>

if not under the assets folder then you can use this code.

<img src="../images/logo.png" id="banner-logo" alt="Landing Page"/>

---

Angular-cli includes the assets folder in the build options by default. I got this issue when the name of my images had spaces or dashes. For example :

• 'my-image-name.png' should be 'myImageName.png'
• 'my image name.png' should be 'myImageName.png'

If you put the image in the assets/img folder, then this line of code should work in your templates :

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

If the issue persist just check if your Angular-cli config file and be sure that your assets folder is added in the build options.

---

Add in angular.json

  "assets": [
              "src/favicon.ico",
              "src/assets"
            ],

And then use it like this: <img src={{imgPath}} alt="img"></div>

And in ts: storyPath = 'assets/images/myImg.png';

ReferenceURL : https://stackoverflow.com/questions/45040843/angular-4-img-src-is-not-working