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 ).
