Angular 프로젝트에 이미지(및 기타 자산)를 로드하는 방법

Angular 프로젝트에 이미지(및 기타 자산)를 로드하는 방법

Angular는 처음이라서 어떻게 해야 할지 모르겠어요.

와 angular-cli를 했습니다.ng new some-project새 앱을 생성합니다.

"에 "images" 내 는 "images" 폴더입니다.src/assets/images

»app.component.html이 내 이다), 는 (이것이 내 지원의 근원이다), (이것이)를 넣었다.

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

가 할 때ng serve웹 어플리케이션을 표시하기 위해 이미지가 표시되지 않습니다.

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

편집: 아래 답변을 참조하십시오.내 실제 이미지 이름은 Angular가 좋아하지 않는 공간을 사용하고 있었다.파일명의스페이스를삭제했더니이미지가올바르게표시되었습니다.

프로젝트에서는 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에서 img src를 angular 2로 바인드하는 방법

난 그걸 고쳤어.내 실제 이미지 파일 이름에 공백이 들어있었는데, Angular가 그것을 좋아하지 않았다. 「 」가 되어 버렸습니다.assets/images/myimage.png일

angular-cli는 기본적으로 빌드 옵션에 자산 폴더를 포함합니다.이미지 이름에 공백이나 대시가 있을 때 이 문제가 발생하였습니다.예를 들어 다음과 같습니다.

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

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

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

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

Angular2 ~ 5에 한정되어 있기 때문에 아래와 같이 속성 바인딩을 사용하여 이미지 경로를 바인드할 수 있습니다.이미지 경로는 작은 따옴표로 둘러싸여 있습니다.

샘플 예시

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

'앱입니다.어플리케이션의 입니다.어플리케이션,어플리케이션,어플리케이션,어플리케이션,어플리케이션,어플리케이션,어플리케이션,어플리케이션,어플리케이션,어플리케이션,어플리케이션.행해해 ?이 ?? ???app/path/to/assets/img.png

1. 컴포넌트 맨 위에 이 행을 추가합니다.

declare var require: any

2. 컴포넌트 클래스에 이 행을 추가합니다.

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

3. html 페이지의 img src 태그에 이 'imgname'을 추가합니다.

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

Angular 8+에서는 다음 단계를 수행할 수 있습니다.

순서 1: 아래와 같이 컴포넌트에 이미지를 로드합니다.

const logo = require('../assets/logo.svg').default as string;

@Component({
    selector: 'app-show-image',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class ShowImageComponent implements OnInit {

  logo = logo;
  constructor() { }
  ngOnInit() { }

}

2단계: html 파일에 로직을 추가합니다.

<img [src]="logo" [alt]="'logo'">

추가 설정을 실시하지 않고 기동하면, 다음과 같은 이상한 에러가 표시됩니다.

ERROR in src/app/app.component.ts(4,14): error TS2580: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i @types/node` and then add `node` to the types field in your tsconfig.

제안대로 실행 –@types/nodenpm을 실행하여 프로젝트 타이핑install @types/node및 편집tsconfig.app.json설정 방법:

"compilerOptions": {
    "types": ["node"],
    ...
}

자세한 내용은 이쪽

항상 정적 리소스(이 경우 이미지)의 경로를 참조하는 html 파일의 위치에 따라 달라집니다.

예 A:

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

보시는 바와 같이 page.html은 루트(src 폴더)에서1폴더 떨어져 있습니다.따라서 루트로 돌아가려면 1개의 ../가 필요합니다.그러면 루트에서 이미지로 이동할 수 있습니다.

<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">

'Images'에서는 'I'가 대문자였어요앵글클리도 싫어했어요대소문자를 구분합니다.

IIS와 같은 일부 웹 서버에는 문제가 없습니다. 각 애플리케이션이 IIS에서 호스트되는 경우 대소문자가 구분되지 않습니다.

이미지를 로드하는 동안 공간을 확보하지 마십시오.

대신

<img src='assets/img/myimage.png' alt="">     

문자열 보간 또는 속성 바인딩을 사용하여 소스 이미지를 베스트 프랙티스로 로드해 보십시오.

src가 복사한 경로도 복사하여 경로를 src/src/img로 시작해야 합니다.단, src/를 사용하지 않고 경로를 시작해야 합니다.따라서 다음 경로를 삭제합니다.

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