2017-12-21 25 views
1

갤러리에서 img 태그로 이미지를 표시하려고합니다. 그러나 img 태그에 이미지가 표시되지 않습니다. 그러나 PhotoViewer과 함께 작업 중입니다. 아래 코드는 내 코드입니다. 내가 카메라 (sourceType: this.camera.PictureSourceType.CAMERA)로 SOURCETYPE을 사용하고있는 경우갤러리의 이미지가 표시되지 않습니다. img의 태그가 2입니다.

options: CameraOptions = { 
    quality: 100, 
    destinationType: this.camera.DestinationType.FILE_URI, 
    encodingType: this.camera.EncodingType.JPEG, 
    sourceType: this.camera.PictureSourceType.PHOTOLIBRARY 
    //mediaType: this.camera.MediaType.PICTURE 
    } 

이미지 HTML

<img [src]="captureDataUrl" *ngIf="captureDataUrl"/> 

this.camera.getPicture(this.options).then((imageData) => { 

    alert(imageData) 
    this.photoViewer.show(imageData); 
    this.captureDataUrl=imageData; 

}, (err) => { 
    // Handle error 
}); 

로 촬영, 또한 작업은 img 태그에 이미지를 표시하지만,하지 sourceType을 sourceType: this.camera.PictureSourceType.PHOTOLIBRARY으로 사용하면 작업 할 수 있습니다.

+0

당신이 SecurityTrustUrl''와 같은 콘솔에 어떤 오류가나요 다음 단계

 var options = { quality: 80, allowEdit: true, sourceType: this.camera.PictureSourceType.CAMERA, saveToPhotoAlbum: false, correctOrientation: true, encodingType: this.camera.EncodingType.JPEG, destinationType: this.camera.DestinationType.FILE_URI //encodingType: this.camera.EncodingType.PNG, }; this.camera.getPicture(options).then((imagePath) => { // Special handling for Android library // if (this.platform.is('ios')) { this.ImageData = imagePath.replace(/^file:\/\//, ''); } else { this.ImageData = imagePath; } this.photos.push(this.ImageData); //if you have to show multiple image this.photos.reverse(); } 

HTML 섹션을 수행하여이 문제를 해결 ? – hrdkisback

+0

예. 이 오류는 .unsafe : content : //com.android.providers.media.documents/document/image%3A81입니다. 그러나 포토 뷰어에 대한 작업 –

+1

'.unsafe : content' 오류에 대해서는'DomSanitizationService'를 사용하여 SecurityTrustUrl을 우회해야합니다. 자세한 정보는 https://devfanaticblog.com/working-with-camera-in-ionic-2-and를 참조하십시오. - 네이티브 - 네이티브/ – hrdkisback

답변

2

안녕하세요 IOS에서 같은 문제가 도와주세요, 나는

<ion-row> 
    <ion-col col-3 *ngFor="let photo of photos; let id = index"> 
        <ion-card class="block"> 
         <ion-icon name="ios-close-circle-outline" class="deleteIcon" (click)="deletePhoto(id)"></ion-icon> 
         <img [src]="photo" *ngIf="photo" /> 
        </ion-card> 
    </ion-col> 
</ion-row> 
+0

답변 해 주셔서 감사합니다. 잘 작동합니다. 제 코드에 뭐가 잘못 됐는지 말해 주시겠습니까? –

+0

코드에 파일 URL 문제가 있다고 생각합니다. – Manish

+0

내 인생을 살 렸어, 고마워. –