前言:web端直接展示heic图片会出现裂图,所以需要处理一下

html部分: 

<div class="pic-box">
  <img [src]="item.path | imageDomain" />
</div>

js部分:

// 创建图片拼接域名管道
import { Pipe, PipeTransform } from '@angular/core';
import { environment } from '@env/environment';

@Pipe({
  name: 'imageDomain',
})

export class ImageDomainPipe implements PipeTransform {
  // path,当前图片字段,例:'image/test/verification/aaa.jpg'
  transform(path: string) {
   let getImageFormat;
   if (path) {
     getImageFormat = path.substring(path.lastIndexOf('.') + 1, path.length); // 截取图片格式
     getImageFormat = getImageFormat.toLowerCase(); // 图片格式转成小写
     
     // 如果图片格式包含了heic则拼接后缀即可
     const changeImageFormat = getImageFormat.indexOf('heic') > -1 ? '?x-oss-process=image/format,png' : '';
     // environment.imageDomain,为你当前环境的图片域名
     // 返回一个完整的图片地址
     return environment.imageDomain + '/' + path + changeImageFormat;
    }
  }
}