I want to make my components portable to other projects, therefore I want to have all the images contained in the component folder and let the compiler take care of it.

I found different solutions which I all don't quite like:

1) Defining different folders in the angular.json:

Is it mandatory to keep images in assets folder in Angular 2?

I don't like this approach because it requires a lot of manual work.

2) Defining a path variable within the component

Angular 2 img src in a relative path

This approach creates a lot of extra variables.

My goal would be to do s.th. like this

A) Referencing to the image like all other images:

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

B) Configuring the compiler to move the images from all folders to assets, e.g. in an old AngularJs project where I used gulp, this could be done with 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/'));

});

And it could be easily achieved, that images are only copied if images change for faster compiling:

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

Question

Can the compiler be set up to search for images and move them to assets/images and would there be a downside to it ( I read that assets are static for faster compiling ).