프로젝트 Angular에서 이미지 (및 기타 자산)를로드하는 방법은 무엇입니까?

저는 Angular를 처음 접했기 때문에 이것을 수행하는 모범 사례가 확실하지 않습니다.

angular-cli ng new some-project를 사용하여 새 앱을 생성했습니다.

"assets"폴더에 "images"폴더가 생성되었으므로 이제 내 이미지 폴더는 src/assets/images

에서 app.component.html(내 응용 프로그램의 루트입니다), 내가 넣어

<img class="img-responsive" src="assets/images/myimage.png">

ng serve내 웹 애플리케이션을 보려고 할 때 이미지가 표시되지 않습니다.

Angular 애플리케이션에서 이미지를로드하는 가장 좋은 방법은 무엇입니까?

편집 : 아래 답변을 참조하십시오. 내 실제 이미지 이름은 Angular가 좋아하지 않는 공백을 사용했습니다. 파일 이름에서 공백을 제거하면 이미지가 올바르게 표시됩니다.

나는 그것을 고쳤다. 내 실제 이미지 파일 이름에는 공백이 있었고 어떤 이유로 든 Angular는 그것을 좋아하지 않았습니다. 파일 이름에서 공백을 제거했을 때assets/images/myimage.png 작동했습니다.

내 프로젝트에서 app.component.html에서 다음 구문을 사용하고 있습니다.

<img src="/assets/img/1.jpg" alt="image">

또는

<img src='http://mruanova.com/img/1.jpg' alt='image'>

보간을 사용하여 속성을 바인딩 할 때 [src]를 템플릿 표현식으로 사용합니다.

<img [src]="imagePath" />

와 같다:

<img src={{imagePath}} />

출처 : ngFor의 angular 2에서 img src를 바인딩하는 방법은 무엇입니까?

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

• 'my-image-name.png'는 'myImageName.png'여야합니다.
• 'my image name.png'는 'myImageName.png'여야합니다.

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

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

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

Angular2부터 5까지 특화되어 있으므로 아래와 같이 속성 바인딩을 사용하여 이미지 경로를 바인딩 할 수 있습니다. 이미지 경로는 작은 따옴표로 묶여 있습니다.

샘플 예

<img [src]="'assets/img/klogo.png'" alt="image">

일반적으로 "app"은 응용 프로그램의 루트입니다. 시도해 보셨습니까 app/path/to/assets/img.png?

1 . 이 줄을 구성 요소의 맨 위에 추가하십시오.

declare var require: any

2. 구성 요소 클래스에이 줄을 추가하십시오.

imgname= require("../images/imgname.png");

3. 이 'imgname'을 html 페이지의 img src 태그에 추가하십시오.

   <img src={{imgname}} alt="">

저에게 "I"는 "Images"의 대문자였습니다. angular-cli도 좋아하지 않았습니다. 따라서 대소 문자도 구분합니다.

항상 정적 리소스 (이 경우 이미지)의 경로를 참조하는 html 파일이 어디에 있는지에 따라 다릅니다.

예 A :

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yourpage.html

보시다시피 yourpage.html은 루트 (src 폴더)에서 한 폴더 떨어져 있으므로 루트 로 돌아가려면 ../ 가 한 개 필요 합니다. 그러면 루트에서 이미지로 이동할 수 있습니다.

<img class="img-responsive" src="../assests/images/myimage.png">

예 B :

src
|__assests
   |__images
      |__myimage.png
|__yourmodule
   |__yoursubmodule
      |__yourpage.html

여기에 2 개의 폴더로 트리를 이동해야합니다.

<img class="img-responsive" src="../../assests/images/myimage.png">