Angular 7 point images to cdn

Question

How can I change all <Img src='./assets/abc.svg'> to <Img src='cdn.example.com/abc.svg'>? Basically I want to transform the image sources.

I am aware of --deployUrl and baseHref options but those things seem to not transform imgs' src attribute. Please see this as well: https://github.com/angular/angular-cli/issues/6666

Answer 1

I don't know how to do it with command line arguments, I don't know if it exists already. But you can do it programatically using pipes.

import { environment } from './environments/environment';

@Pipe({
    name: 'env',
})
export class EnvPipe implements PipeTransform {

    transform(url: any): object {
        return environment.production ? /*do transformation here*/ : url;
    }
}

and in you template

<Img src={{'./assets/abc.svg' | env}}>

Drawback is to add this pipe in all your urls (with risk of being forgeted)