Angular渲染富文本时如何将img src的~替换为后端地址解决404

• 方案1：接口响应后直接预处理富文本内容
  拿到后端返回的富文本字段后，用正则批量替换所有img标签中~开头的资源路径，再传递给模板渲染即可，示例代码：

// 建议将后端资源基础地址写入环境变量，方便多环境切换
const BACKEND_MEDIA_URL = 'http://localhost:3000';

// 接口请求成功后处理description字段
this.data.description = this.data.description.replace(/src=['"]~\/media\//g, `src="${BACKEND_MEDIA_URL}/media/`);

模板部分无需修改，继续使用原有逻辑即可。

• 方案2：封装自定义管道，适合多页面复用场景
  如果项目多个地方都需要处理同类富文本路径，可封装全局管道统一处理：

1. 新建fix-media-src.pipe.ts文件：

import { Pipe, PipeTransform } from '@angular/core';
import { environment } from 'src/environments/environment';

@Pipe({
  name: 'fixMediaSrc'
})
export class FixMediaSrcPipe implements PipeTransform {
  transform(htmlContent: string): string {
    if (!htmlContent) return '';
    // 从环境变量读取后端资源地址，开发/生产环境自动适配
    const mediaBaseUrl = environment.backendMediaBase;
    return htmlContent.replace(/src=['"]~\/media\//g, `src="${mediaBaseUrl}/media/`);
  }
}

2. 将管道注册到对应模块的declarations数组中
3. 模板中按顺序串接管道使用：

<div [innerHTML]="data.description | fixMediaSrc | safeHtml"></div>

• 注意事项
  如果你的资源路径不只有~/media/开头的格式，可以调整正则匹配规则，比如将正则改为/src=['"]~\//g，替换内容改为src="${mediaBaseUrl}/"，即可覆盖所有~开头的src路径。

内容的提问来源于stack exchange，提问作者Louis Yupiter