时间戳

首页 > 解决方案 > 组件文件夹中的角度图像：让编译器将图像移动到资产

angular - 组件文件夹中的角度图像：让编译器将图像移动到资产

问题描述

我想让我的组件可移植到其他项目，因此我希望将所有图像包含在组件文件夹中并让编译器处理它。

我发现了我不太喜欢的不同解决方案：

1）在angular.json中定义不同的文件夹：

是否必须将图像保存在 Angular 2 的资产文件夹中？

我不喜欢这种方法，因为它需要大量的手工工作。

2) 在组件内定义路径变量

相对路径中的Angular 2 img src

这种方法会产生很多额外的变量。

我的目标是做某事。像这样

A）像所有其他图像一样引用图像：

<img *ngIf="images[sensor.model]" [src]="'assets/images/' + images[sensor.model]"/>

B）配置编译器以将图像从所有文件夹移动到资产，例如在我使用 gulp 的旧 AngularJs 项目中，这可以通过 globbing 来完成：

gulp.task('images', function () {
  return gulp.src([paths.src + '/**/*.{jpg,jpeg,png,svg,gif}', '!'+'/**/*/*-sprite*'])
    .pipe($.rename({dirname: ''}))
    .pipe(gulp.dest(paths.dist + '/assets/images/'));
});

并且可以很容易地实现，仅在图像更改以加快编译速度时才复制图像：

gulp.watch(paths.src + '/**/*.{jpg,jpeg,png,svg,gif}', ['images']);

问题

编译器是否可以设置为搜索图像并将它们移动assets/images到它，它会有一个缺点（我读到资产是静态的，以便更快地编译）。

标签： angular

解决方案

推荐阅读