각도 4 img src를 찾을 수 없습니다.

각도 4 img src를 찾을 수 없습니다.

각도가 4인 이미지를 소싱하는 데 문제가 있습니다.이미지를 찾을 수 없다는 메시지가 계속 나옵니다.

폴더 구조:

app_folder/
app_component/
  - my_componenet
  - image_folder/
      - myimage

의 이미지를 사용하고 있습니다.mycomponent안에 있는 경우mycomponent다음을 사용하여 직접 삽입합니다.

<img src="img/myimage.png"

이것은 잘 작동하지만, 제가 html을 확인해보니 해시가 생성됩니다.하지만 제 이미지는 목록의 일부이기 때문에 html에 동적으로 추가되어야 합니다.그래서, 만약 내가 사용한다면:

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

그것은 기본적으로.img/myimage.png,동작되지 않습니다.사용하는 경우:

<img [src]="imagePath">

라고 써있습니다NOT FOUND (htttps://localhost/img/myimage.png).좀 도와 줄래요?

앵귤러 JS

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

각진

<img [src]="imagePath">

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

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

자산 폴더 아래에 이미지 폴더 생성

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

각도 4 ~ 8

둘 다 작동합니다.

<img [src]="imageSrc" [alt]="imageAlt" />

<img src="{{imageSrc}}" alt="{{imageAlt}}" />

구성 요소는 다음과 같습니다.

export class sample Component implements OnInit {
   imageSrc = 'assets/images/iphone.png'  
   imageAlt = 'iPhone'

트리 구조:

-> src 
   -> app
   -> assets
      -> images
           'iphone.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>

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

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

그리고 _.component.dll 파일 내에서 다음 세 가지 방법 중 하나를 사용할 수 있습니다.

1 .

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

2 .

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

3 .

<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은 동일한 디렉토리에 있어야 합니다(다음 dir 구조에 따름).빌드 후에도 작동합니다.

디렉토리 구조

-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;
  }

구성요소 구현 DoCheck 인터페이스에서 데이터베이스 수식을 붙여넣습니다.데이터베이스 쿼리는 샘플일 뿐입니다.

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

그리고 html tamplate에서.<div [innerHtml]="concatedPathName"></div>

이미지 너비를 기본값으로 지정해야 합니다.

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

다른 모든 다른 방법을 기반으로 저에게 효과가 있습니다.

Angular 2, 2+ 속성 바인딩의 작동 방식에 대한 중요한 관찰입니다.

에 대한 문제[src]="imagePath"다음 작업을 수행하는 동안 작동하지 않습니다.

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

당신의 구속력 선언 때문에[src]="imagePath"구성 요소에 직접 바인딩됨this.imagePath또는 ngFor 루프의 일부라면,*each.imagePath.

그러나 다른 두 가지 작업 옵션에서는 HTML의 문자열을 바인딩하거나 HTML을 아직 정의되지 않은 변수에 바인딩할 수 있습니다.

바인딩하면 HTML에서 오류를 발생시키지 않습니다.<img src=garbage*Th_i$.ngs>아무리 앵귤러 의지가 강해도.

다음과 같이 변수가 정의되지 않을 수 있는 경우 인라인을 사용하는 것이 좋습니다.<img [src]="!!imagePath ? imagePath : 'urlString'">라고 생각할 수 있는.node.src = imagePath ? imagePath : 'something'.

결측 가능성이 있는 변수에 바인딩하지 않도록 하거나 유용하게 사용합니다.*ngIf그 요소에서.

포함된 자산 폴더가 있는 경우 app -> assets:[]에서 .angular-cli.json을 체크인합니다.

또는 여기에 https://github.com/angular/angular-cli/issues/2231, 이 도움이 될 수도 있습니다.

이미지가 자산 폴더 아래에 있는 경우 이 코드를 사용하여 이미지 경로를 추가해야 합니다.

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

자산 폴더 아래에 없으면 이 코드를 사용할 수 있습니다.

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

Angular-cli는 기본적으로 빌드 옵션에 자산 폴더를 포함합니다.이미지 이름에 공백이나 대시가 있을 때 이 문제가 발생했습니다.예:

• 'my-image-name.png'은(는) 'myImageName.png'이어야 합니다.
• 'my image name.png'은 'my ImageName.png'이어야 합니다.

이미지를 자산/img 폴더에 넣으면 템플릿에서 다음 코드가 작동합니다.

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

문제가 지속되면 Angular-cli 구성 파일을 확인하고 자산 폴더가 빌드 옵션에 추가되었는지 확인하십시오.

angular.json을 추가

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

요: 그고다음같사용니다합이과리▁and.<img src={{imgPath}} alt="img"></div>

ints: 고그리 ints:storyPath = 'assets/images/myImg.png';

사용:

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

이것이 제 문제였습니다. 내용이 다음과 같이 src/app/types/types.d.ts를 추가했습니다.

declare module '*.png' {
    const value: any
    export default value
}

declare module '*.jpg' {
    const value: any
    export default value
}

declare module '*.svg' {
    const value: any
    export default value
}

언급URL : https://stackoverflow.com/questions/45040843/angular-4-img-src-is-not-found