如何在HTTPS连接下加载Base64格式图片？

Looks like you're hitting Angular's built-in security safeguards here, not a standard mixed content issue with external HTTP resources. Let me break this down and show you how to fix it:

Why This Happens #

Angular's DomSanitizer automatically marks certain types of content (including unprocessed data URIs) as unsafe to prevent potential XSS attacks. When you directly assign data:image/png;base64,${data} to an image's src in an Angular app, the sanitizer adds the unsafe: prefix to the URI. This makes your HTTPS browser treat it as an insecure resource, triggering the mixed content error you're seeing.

Step-by-Step Solution #

You need to explicitly tell Angular that your data URI is safe using the DomSanitizer service. Here's how to implement this:

1. Import Required Modules
   In your component file, import DomSanitizer and SafeResourceUrl from Angular's platform-browser package:

   import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
   

2. Inject the Sanitizer
   Add DomSanitizer to your component's constructor to make it available:

   constructor(private sanitizer: DomSanitizer) { }
   

3. Sanitize the Data URI
   Create a property or method to process your Base64 data and return a safe resource URL. Make sure to use the correct MIME type (match it to your actual image format, e.g., image/jpeg or image/png):

   safeImageUrl: SafeResourceUrl | undefined;
   // Assume 'base64Data' is the Base64 string you fetched via API
   base64Data: string = "your-fetched-base64-string";
   
   ngOnInit(): void {
     // Replace 'image/jpeg' with your image's actual MIME type
     this.safeImageUrl = this.sanitizer.bypassSecurityTrustResourceUrl(`data:image/jpeg;base64,${this.base64Data}`);
   }
   

4. Use the Safe URL in Your Template
   Bind the sanitized URL to your image's src attribute in the component template:

   <img [src]="safeImageUrl" alt="Loaded Image">
   

Quick Check #

Double-check that the MIME type in your data URI matches the actual image format (your error shows image/jpeg but your code uses image/png—this mismatch won't cause the mixed content error, but it might prevent the image from displaying correctly).

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