离子图像未在离子 3 中显示图像答案

【问题标题】：Ion-image isn't showing image in ionic 3离子图像未在离子 3 中显示图像
【发布时间】：2019-12-15 13:39:18
【问题描述】：

我正在尝试使用标签显示图像，但图像未显示 url 正在工作，并且没有警告或错误告诉我是否做错了什么我的代码是

 <ion-img  style="height: 101px;width: 33vw;" src="{{product.images[0].img}}" class="thumbnail-image" (click)="selectedArticle(product)" ></ion-img>

我正在像这样在 Base64 src 中获取图像 url

data:image/png;base64,iVBORw0K

不知道ion-image是否支持这个url。

任何帮助将不胜感激。

【问题讨论】：

它应该可以工作，你能为此创建一个演示堆栈闪电战吗？

标签： angular ionic-framework ionic2 ionic3

【解决方案1】：

添加浏览器清理程序并清理 url，而不是使用 src="{{your_variable}}" 使用 [src]="your_variable"。例如：

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

@Component({
  selector: 'app-image-modal',
  templateUrl: './image-modal.page.html'],
})
export class ImageModalPage {
  user_image: SafeResourceUrl;
  constructor( private sanitizer: DomSanitizer ) { }

  loadImage(){
    this.user_image = this.sanitizer.bypassSecurityTrustResourceUrl(/* your base64 string in here*');
  }
}

&lt;img [src]="user_image" /&gt;

【讨论】：