Webpack 및 Angular2로 이미지 생성

Question

Webpack을 사용하여 프로젝트를 빌드하고 스캐 폴딩하는 Angular2의 작은 응용 프로그램이 있습니다.

내가 직면 한 것은 TypeScript 파일에 지정된 프로덕션 용 이미지를로드 할 수 없다는 것입니다. npm run build을 실행할 때 생성 된 파일에서 이러한 이미지를 찾을 수 없습니다 (SCSS에 지정된 이미지가 생성됩니다).

다음은 예 아래에 구성 요소가 어떻게 보이고 Webpack 구성이 매우 기본적인 것처럼 보입니다.

주된 질문은 문제를 해결할 수 있습니다.이 문제를 해결하기 위해이 웹팩 로더를 추가해야 할 수도 있지만 Webpack에 새로 온 사람이 될 생각은 전혀 없습니다.

import { Component, OnInit, Injectable } from '@angular/core'; 

@Injectable() 
@Component({ 
    selector: 'custom-template', 
    templateUrl: './custom.html' 
}) 

export class CustomComponent { 
    public data: any = [ 
     { 
      image: '../../../assets/images/1.jpg', 
      text: 'Text 1...' 
     }, 
     { 
      image: '../../../assets/images/2.jpg', 
      text: 'Text 2...' 
     }, 
     { 
      image: '../../../assets/images/3.jpg', 
      text: 'Text 3...' 
     } 
    ]; 
} 

Answer 1

나는 Webpack이 제공하는 file-loader을 믿습니다. 파일을 포함 시키려면 로더를 사용하여 파일을 요구할 수 있으며 출력에서 ​​상대 경로를 리턴합니다.

npm install --save-dev file-loader 

귀하의 data 다음 (제공되는 경로는 파일에 상대적)과 같을 것이다 : 평가 때 이런 식으로 뭔가를 생산하는 것

public data: any = [ 
    { 
     image: require('file-loader!../../../assets/images/1.jpg'), 
     text: 'Text 1...' 
    }, 
    ... 
]; 

:

로 설치

public data: any = [ 
    { 
     image: '/project-output-path/abcdef014ea5754463fac.jpg', 
     text: 'Text 1...' 
    }, 
    ... 
];