我按照离子文档here和Github doc here的说明进行操作。到目前为止,我可以检索所有库项目信息。但我从未成功地在img标签上显示照片。
以下是 home.ts :
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { PhotoLibrary } from '@ionic-native/photo-library';
import { Platform } from 'ionic-angular';
import { ChangeDetectorRef } from '@angular/core';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
library:any;
constructor(public navCtrl: NavController, private photoLibrary: PhotoLibrary, private platform: Platform,
private cd: ChangeDetectorRef, private sanitizer: DomSanitizer) {
this.library = [];
this.fetchPhotos();
}
fetchPhotos() {
this.platform.ready().then(() => {
this.library = [];
this.photoLibrary.requestAuthorization().then(() => {
this.photoLibrary.getLibrary({
thumbnailWidth: 512,
thumbnailHeight: 384,
itemsInChunk: 100,
chunkTimeSec: 0.5,
useOriginalFileNames: false
}).subscribe({
next: (chunk) => {
this.library = this.library.concat(chunk);
//this.library = this.library.slice(0, 9); // To take top 10 images
this.cd.detectChanges();
},
error: (err: string) => {
if (err.startsWith('Permission')) {
console.log('permissions weren\'t granted')
} else { // Real error
console.log('getLibrary error: ');
console.log(err);
}
},
complete: () => {
// Library completely loaded
console.log('done getting photos');
}
});
});
});
}
imgUrl(imgUrl) {
let url: SafeUrl = this.sanitizer.bypassSecurityTrustUrl(imgUrl);
return url;
}
}
这是 home.html :
<ion-content padding>
<img *ngFor="let libraryItem of library" [src]="imgUrl(libraryItem.thumbnailURL)" />
</ion-content>
我总是使用src=null
获得空的img框。
如果我不使用 DomSantinizer ,它会显示所有照片的警告:
警告:清理不安全的URL值 cdvphotolibrary://缩略图PHOTOID = XXX&安培;宽度= XX&安培;高度= XX&安培;质量= 0.5
(见http://g.co/ng/security#xss)
我的离子信息是:
cli包:(/usr/local/lib/node_modules
)
@ionic/cli-utils : 1.15.2
ionic (Ionic CLI) : 3.15.2
全球套餐:
cordova (Cordova CLI) : 7.1.0
本地包裹:
@ionic/app-scripts : 3.0.1
Cordova Platforms : android 6.3.0 ios 4.5.2
Ionic Framework : ionic-angular 3.8.0
系统:
ios-deploy : 1.9.2
ios-sim : 5.0.13
Node : v7.4.0
npm : 5.5.1
OS : macOS Sierra
Xcode : Xcode 8.3.2 Build version 8E2002
有人请帮忙吗?谢谢!
答案 0 :(得分:2)
我想我在这里找到了一个解决方案 - 将WKWebView更改为UIWebView。然后图片出现了。
我在post中找到了原因。离子官方doc也证明目前WKWebView不支持本地文件。
我希望我的帖子可以帮助有类似情况的人,并希望离子团队可以很快改进WKWebView的自定义架构文件路径。快乐的编码〜!
答案 1 :(得分:1)
这就像一个魅力: -
如果您使用的是wkwebview(现在是新应用的默认设置) 然后按照以下步骤进行操作,
import { normalizeURL} from ‘ionic-angular’;
store your image path in some new variable.
var imagePath = this.file.dataDirectory + “test.png”;
this.tempImagePath = normalizeURL(imagePath);
then in your html file,
use tempImagePath as image src.
来源: https://forum.ionicframework.com/t/downloaded-image-is-not-displayed-ionic-3-8/110912/2
要查看WKWebview是否已正确安装,请尝试将其添加到主应用组件:
if (window.indexedDB) {
console.log('I have WKWebview installed!');
} else {
console.log('I have UIWebView installed!');
}