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

프로젝트 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="">

참고 URL : https://stackoverflow.com/questions/42793292/how-to-load-image-and-other-assets-in-angular-an-project