저는 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: any2. 구성 요소 클래스에이 줄을 추가하십시오.
imgname= require("../images/imgname.png");-
이 ‘imgname’을 html 페이지의 img src 태그에 추가하십시오.
<img src={{imgname}} alt="">
답변
저에게 “I”는 “Images”의 대문자였습니다. angular-cli도 좋아하지 않았습니다. 따라서 대소 문자도 구분합니다.
