Angular中嵌入需认证图片至ngx-markdown组件问题求助

方案1：自定义ngx-markdown渲染器修改图片链接 #

ngx-markdown支持通过扩展渲染器自定义标签渲染逻辑，可重写图片渲染方法，在生成img标签时自动拼接认证参数：

1. 在Angular模块（如AppModule）中配置MarkdownModule，注入自定义渲染器：

import { NgModule } from '@angular/core';
import { MarkdownModule, MarkdownRenderer } from 'ngx-markdown';
import { AuthService } from './auth.service'; // 你的认证服务，用于获取token

export function createCustomRenderer(authService: AuthService) {
  const renderer = new MarkdownRenderer();
  // 重写图片渲染方法
  renderer.image = (href: string, title: string, text: string) => {
    const token = authService.getAuthToken();
    // 根据后端要求调整认证参数的拼接方式
    const authenticatedHref = `${href}${href.includes('?') ? '&' : '?'}token=${token}`;
    return `<img src="${authenticatedHref}" alt="${text}" ${title ? `title="${title}"` : ''} />`;
  };
  return renderer;
}

@NgModule({
  imports: [
    MarkdownModule.forRoot({
      rendererProvider: {
        provide: MarkdownRenderer,
        useFactory: createCustomRenderer,
        deps: [AuthService]
      }
    })
  ]
})
export class AppModule {}

2. 确保AuthService的getAuthToken()方法能正确读取当前用户的认证令牌（比如从localStorage读取JWT）。

此方案在Markdown渲染阶段直接修改链接，无需后续DOM操作，兼容性好。

方案2：渲染后通过DOM操作替换图片源为Blob URL #

如果后端要求通过请求头传递认证信息（如Bearer Token），可通过HttpClient先获取图片Blob，再生成Object URL替换img的src：

1. 在模板中监听ngx-markdown的afterRender事件：

<markdown [data]="markdownContent" (afterRender)="handleMarkdownRender($event)"></markdown>

2. 在组件类中实现处理逻辑：

import { Component, OnDestroy } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-markdown-viewer',
  templateUrl: './markdown-viewer.component.html'
})
export class MarkdownViewerComponent implements OnDestroy {
  markdownContent: string; // 从数据库获取的Markdown内容
  private blobUrls: string[] = [];

  constructor(
    private http: HttpClient,
    private authService: AuthService
  ) {}

  handleMarkdownRender(event: { element: HTMLElement }) {
    const imgElements = event.element.querySelectorAll('img');
    imgElements.forEach(img => {
      const originalSrc = img.src;
      const headers = new HttpHeaders({
        'Authorization': `Bearer ${this.authService.getAuthToken()}`
      });

      this.http.get(originalSrc, { headers, responseType: 'blob' }).subscribe(blob => {
        const blobUrl = URL.createObjectURL(blob);
        this.blobUrls.push(blobUrl);
        img.src = blobUrl;
        img.onload = () => URL.revokeObjectURL(blobUrl);
      });
    });
  }

  ngOnDestroy() {
    // 组件销毁时清理所有Blob URL，避免内存泄漏
    this.blobUrls.forEach(url => URL.revokeObjectURL(url));
  }
}

注意需处理图片加载失败场景，同时在组件销毁时清理Blob URL。

方案3：切换为Cookie-Based认证（推荐，需后端支持） #

如果后端支持Cookie认证（如Session或HttpOnly Cookie），可将认证信息存入Cookie，浏览器会自动在请求同域资源时携带Cookie，无需前端额外处理，图片请求即可通过权限校验。

此方案安全性更高（HttpOnly Cookie可避免XSS攻击），但需后端配合配置Cookie跨域策略（若图片接口与前端不同域）。

内容的提问来源于stack exchange，提问作者Jose Raul Perera