Ionic从服务器加载二维码图片：模拟器不显示但浏览器正常的问题解决求助

大家好，我碰到了一个头疼的问题：我的Ionic应用在浏览器里打开时，二维码图片能正常显示，但放到某些模拟器里就加载不出来了。

我一开始尝试用Axios来处理图片请求，结果还是一样——浏览器能正常显示，模拟器里就是看不到图片。想请教下各位，有没有其他解决图片加载的思路？或者是不是我的代码哪里写得不对、有遗漏的地方？

以下是我的代码：

Angular组件TS代码 #

import { Component, OnInit } from '@angular/core';
import { SafeUrl } from '@angular/platform-browser';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-qrcode',
  templateUrl: './qrcode.component.html',
  styleUrls: ['./qrcode.component.scss'],
})
export class QrcodeComponent implements OnInit {
  imageUrl: SafeUrl = '';

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.loadQrCode()
  }

  loadQrCode() {
    this.http.get('ENDPOINT', {
      headers: {
        "Content-Type": "application/json",
      },
      responseType: 'blob'
    })
    .subscribe(response => {
      const reader = new FileReader();
      reader.onloadend = () => {
        const base64Image = reader.result as string;
        this.imageUrl = base64Image;
      };
      reader.readAsDataURL(response);
    });
  }
}

HTML模板代码 #

<ion-card>
  <ion-card-header>
    <ion-card-title>QrCode</ion-card-title>
    <ion-card-content>
      <img [src]="imageUrl" width="200" height="200">
    </ion-card-content>
  </ion-card-header>
</ion-card>

可能的排查方向和解决方法 #

• 检查CORS配置：模拟器里的网络请求是真实的跨域请求，而浏览器开发环境可能通过本地代理自动处理了CORS。需要后端服务器配置允许你的应用域名（或模拟器的请求来源）跨域访问。
• 改用Object URL替代Base64：FileReader转Base64的方式在某些移动环境下可能有兼容性问题，试试直接创建Object URL：

  // 先注入DomSanitizer
  import { DomSanitizer } from '@angular/platform-browser';
  
  constructor(private http: HttpClient, private sanitizer: DomSanitizer) { }
  
  loadQrCode() {
    this.http.get('ENDPOINT', {
      headers: {
        "Content-Type": "application/json",
      },
      responseType: 'blob'
    })
    .subscribe(response => {
      // 创建Object URL并安全化
      const objectUrl = URL.createObjectURL(response);
      this.imageUrl = this.sanitizer.bypassSecurityTrustUrl(objectUrl);
    });
  }
  

• 确认模拟器网络权限：检查Android模拟器的应用权限，确保INTERNET权限已经开启（在AndroidManifest.xml里确认<uses-permission android:name="android.permission.INTERNET" />存在）；iOS模拟器则需要确认应用的网络配置没有限制。
• 添加错误调试：给img标签加上错误监听，看看具体的加载错误信息：

  <img [src]="imageUrl" width="200" height="200" (error)="onImageError($event)">
  

  然后在TS里添加处理函数：

  onImageError(event: Event) {
    console.error('二维码加载失败:', event);
    // 可以在这里打印imageUrl或者查看错误详情
  }
  

• 验证服务器响应：在模拟器里抓包或者打印返回的Blob信息，确认服务器返回的是正确的图片Blob，而不是错误的响应体（比如404、500的错误内容）。

备注：内容来源于stack exchange，提问作者WesleyAlmont