Фотографии не показывают Ionic 3 - PullRequest
Новая
       21

Фотографии не показывают Ionic 3

0 голосов
/ 23 сентября 2018

Я создаю приложение Ionic и пытаюсь использовать camera собственный плагин, чтобы делать фотографии, а затем показывать их на экране, скрипт работает, когда я создаю новый проект и помещаю его внутрь, ноон не работает над проектом, над которым я работаю.

Я думал, что есть проблема с моим package.json, но я обновил все пакеты, удалил плагины для файлов и камер, установил их снова, но проблема заключается в том, чтовсе тот же, это вывод, который я получаю enter image description here

Но когда я создаю новый проект и пробую сценарий, фотография показывает отлично!

I 'Я просто застрял и не знаю, что может вызвать этот конфликт или где искать, любезно помочь

HTML: 

<ion-card *ngIf=resultImageArray>
  <img src="{{ resultImageArray }}" />
</ion-card>

TS: 

import { Component } from '@angular/core'; 
import { NavController, ToastController } from 'ionic-angular';
import {Camera, CameraOptions} from "@ionic-native/camera";
import {File} from '@ionic-native/file';
export class HomePage {

public imageURI: any;
public imageName: any;
public fileCreated: boolean = false;
public imageString: any;
resultImageArray: any;
constructor(public navCtrl: NavController, private file: File, private 
camera: Camera, private toastCtrl: ToastController,) {}
getImageFromCamera() {
const options: CameraOptions = {
    quality: 20,
    saveToPhotoAlbum: true,
    destinationType: this.camera.DestinationType.FILE_URI,
    sourceType: this.camera.PictureSourceType.CAMERA,
    encodingType: this.camera.EncodingType.JPEG,
    allowEdit: true
};

this.camera.getPicture(options).then((imageData) => {
    this.imageURI = imageData;
    this.imageName = imageData.substr(imageData.lastIndexOf('/') + 1);
    this.file.checkDir(this.file.externalRootDirectory, 'ImagesDemo')
        .then(() => {
            this.fileCreated = true;
        }, (err) => {
            console.log("checkDir: Error");
            console.log(JSON.stringify(err));
            this.presentToast("checkDir Failed");
        });
    if (this.fileCreated) {
        this.presentToast("Directory Already exist");
    }
    else {

 this.file.createDir(this.file.externalRootDirectory,"ImagesDemo",true)
            .then((res) => {
                this.presentToast("Directory Created");
            }, (err) => {
                console.log("Directory Creation Error:");
                console.log(JSON.stringify(err));
            });
    }

    let tempPath = this.imageURI.substr(0,this.imageURI.lastIndexOf('/')+1);
    let androidPath = this.file.externalRootDirectory + '/ImagesDemo/';
    this.imageString = androidPath + this.imageName;

    this.file.moveFile(tempPath, this.imageName, androidPath,this.imageName)
        .then((res) => {
            this.presentToast("Image Saved Successfully");
            this.readImage(this.imageString);

        }, (err) => {
            console.log("Image Copy Failed");
            console.log(JSON.stringify(err));
            this.presentToast("Image Copy Failed");
        });

    this.toDataURL(this.imageURI, function (dataUrl) {
        console.log('RESULT:' + dataUrl);
    });
    }, (err) => {
    console.log(JSON.stringify(err));
    this.presentToast(JSON.stringify(err));
    });
}


presentToast(msg) {
let toast = this.toastCtrl.create({
    message: msg,
    duration: 2000
});
toast.present();
}

toDataURL(url, callback) {
let xhr = new XMLHttpRequest();
xhr.onload = function () {
    let reader = new FileReader();
    reader.onloadend = function () {
        callback(reader.result);
    };
    reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}

readImage(filePath) {
let tempPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
let imageName = filePath.substr(filePath.lastIndexOf('/') + 1);

this.file.readAsDataURL(tempPath, imageName)
    .then((res) => {
        this.presentToast("Image Get Done");
        this.resultImageArray = res;
    }, (err) => {
        this.presentToast("Image Get Error");
    });
}
}

И этоэто ошибка, которую я получаю из консоли при удаленной отладке приложения:

(индекс): 1 Отказался загружать данные 'data: image / jpeg; base64, / 9j / 4QBAAl + B // 2Q == ', поскольку он нарушает следующую директиву политики безопасности содержимого: "default-src *".Обратите внимание, что 'img-src' не был задан явно, поэтому в качестве запасного варианта используется 'default-src'.

Я сократил код в image base 64, потому что он очень длинный и не очень удобен для чтения,так почему он показывает без ошибок, когда я создаю новый проект и в этом конкретном проекте он не работает?

1 Ответ

0 голосов
/ 23 сентября 2018

Хорошо, я понял это, поэтому я подумал, что кто-то может искать это

Я добавил эту строку в мой файл index.html 

<meta http-equiv="Content-Security-Policy" content="default-src *; 
style-src 'self' 'unsafe-inline'; 
script-src 'self' 'unsafe-inline' 'unsafe-eval';
img-src 'self' data: https://s-media-cache-ak0.pinimg.com;
script-src 'self' https://maps.googleapis.com;
" />

теперь все работает отлично

...