Angular 7 如何将图片指向 CDN？

Question

我该如何将所有的<Img src='./assets/abc.svg'>替换为<Img src='cdn.example.com/abc.svg'>？基本上我想要转换图片来源。我知道--deployUrl和baseHref选项，但是它们似乎不能转换图片的src属性。请参见此链接：https://github.com/angular/angular-cli/issues/6666。

- Rajat Saxena

Answer 1

我不知道如何使用命令行参数来完成，也不知道它是否已经存在。但是你可以使用管道通过编程的方式来实现。

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

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

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

在你的模板中。

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

缺点是需要在所有URL中添加此管道符号（有遗漏的风险）。

- bubbles

---

我知道这个选项，但我真的不想在我的项目中每个图像都加上 env。 - Rajat Saxena

Answer 2

尝试阅读以下内容： https://devblogs.microsoft.com/premier-developer/angular-how-to-editable-config-files/ 您可以创建两个带有“assetsUrl”属性的JSON文件（dev和prod）以区分值。 在开发环境中，它将加载“./assets”，在生产环境中则为“cdn.example.com”。并且不要忘记使用[src]而不是src。

- Nicola