Question

我遇到过这个问题，我试图以数据网址（data:image/jpeg;base64,...）的形式在两个地方显示从设备相册中选择的图片。

HTML

<div class="pic-img-wrapper" [style.backgroundImage]="imgSrc | safeStyleUrl" float-right (click)="toggleImgs()" tappable>
</div>

和

<div *ngFor="let img of imgSrcs; let i = index"  [style.backgroundImage]="img | safeStyleUrl">
    <span (click)="removeImage(i)" tappable>X</span>
</div>

我使用pipe来清理数据网址：

import { Pipe } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
    name: 'safeStyleUrl'
})
export class SafeStyleUrlPipe{
    constructor(private sanitizer: DomSanitizer){}

    transform(url:string){
        return this.sanitizer.bypassSecurityTrustStyle('url(' + url + ')');
    }
}

我已将数据网址的分配包装到imgSrc中的imgSrcs和zone.run()：

private handleNewPicture(imageData:any):void{
    if(this.imgSrcs.length < 3){
        this.zone.run(() => {
            this.imgSrcs.push(imageData);
            this.imgSrc = imageData;
            this.emitChange();
        });
    }
}

图像在Android设备上正确显示，但在iOS设备上无法显示。调试我的iOS设备时，我可以看到数据URL传递给pipe。此外，第二个*ngFor - 代码段中的HTML会创建正确数量的元素，但不会生成背景图片。将图像上传到我的Firebase存储。

Ionic3 [style.backgroundImage] - 绑定不仅仅在iOS上更新UI

0 个答案: