Question

我在Angular2中有一个小应用程序，它使用Webpack来构建和搭建项目。

我遇到的是我无法加载TypeScript文件中指定的生产图像。当我运行npm run build时，我在生成的文件中找不到这些图像（生成SCSS中指定的图像）。

以下是一个示例，组件的外观如何，我的Webpack配置看起来非常基本。

主要问题是可以修复它，可能需要为这个案例添加一些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...'
    },
    ...
];

使用Webpack和Angular2生成图像

1 个答案: