Question

在我无法预览图像之后，我将图像URL推入数组。

即使在我无法做到这一点的情况下，我也尝试了此for循环？

在这里，我将整个URL推送到数组中以在客户端显示，但是我无法显示它。

这是我的mutiupload.ts

import { Component } from '@angular/core';
import { AlertController ,NavController, ActionSheetController, ToastController, Platform, LoadingController, Loading, IonicPage } from 'ionic-angular';

import { File } from '@ionic-native/file';
import { Transfer, TransferObject } from '@ionic-native/transfer';
import { FilePath } from '@ionic-native/file-path';
import { Camera } from '@ionic-native/camera';
import { RestProvider } from '/home/bb/Desktop/root/frontend/css_client/src/providers/rest/rest';

declare var cordova: any;
/**
 * Generated class for the MultiuploadPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-multiupload',
  templateUrl: 'multiupload.html',
})
export class MultiuploadPage {
  lastImage: string = null;
  loading: Loading;
  aImages    :  any;

  constructor(public  alertCtrl: AlertController ,public navCtrl: NavController, private camera: Camera, private transfer: Transfer, private file: File, private filePath: FilePath, public actionSheetCtrl: ActionSheetController, public toastCtrl: ToastController, public platform: Platform, public loadingCtrl: LoadingController,private auth: RestProvider) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad MultiuploadPage');
  }
  public presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Select Image Source',
      buttons: [
        {
          text: 'Use Camera',
          handler: () => {
            this.takePicture(this.camera.PictureSourceType.CAMERA);
          }
        },
        {
          text: 'Cancel',
          role: 'cancel'
        }
      ]
    });
    actionSheet.present();
  }

  public takePicture(sourceType) {
    // Create options for the Camera Dialog
    var options = {
      quality: 100,
      sourceType: sourceType,
      saveToPhotoAlbum: false,
      correctOrientation: true
    };

    // Get the data of an image
    this.camera.getPicture(options).then((imagePath) => {
      // Special handling for Android library
        var currentName = imagePath.substr(imagePath.lastIndexOf('/') + 1);
        var correctPath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
        this.copyFileToLocalDir(correctPath, currentName, this.createFileName());
    }, (err) => {
      this.presentToast('Error while selecting image.');
    });
  }

// Create a new name for the image
private createFileName() {
  var d = new Date(),
  n = d.getTime(),
  newFileName =  n + ".jpg";
  return newFileName;
}

// Copy the image to a local folder
private copyFileToLocalDir(namePath, currentName, newFileName) {
  this.file.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success => {
    this.lastImage = newFileName;
  }, error => {
    this.presentToast('Error while storing file.');
  });
}

private presentToast(text) {
  let toast = this.toastCtrl.create({
    message: text,
    duration: 3000,
    position: 'top'
  });
  toast.present();
}

public pathForImage(img) {
  if (img === null) {
    return '';
  } else {
    var picture = cordova.file.dataDirectory + img;
    this.aImages.push({
        'image': picture
    });
    return picture; 
  }
}
} '

这是我的html文档

<!--
  Generated template for the MultiuploadPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar color="primary">
    <ion-title>multiupload</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
    <img src="{{pathForImage(lastImage)}}" style="width: 100%" [hidden]="lastImage === null">
 <button ion-button primary (click) ="presentActionSheet()" ><ion-icon name="camera">Select</ion-icon></button>
</ion-content>

实际结果应该是图片数组，但是我无法显示图片进行预览。

Answer 1

您可以在我的应用程序正常工作时尝试

var num = 0;
var images = ["images/1.jpg","images/2.gif","images/3.jpg", "images/4.jpeg"];
var len = images.length;(
function loop(){
  var rotator = document.getElementById('rotator');
  // change to match images folder 
  var delayInSeconds = 10; 
  // set number of seconds delay 
  // list image names 
  // don't change below this line 
  var changeImage =function loop(){
  var len = images.length; 
  rotator.src = images[num++]; if (num == len) { num = 0; 
  } 
};
//(ram.value=="True"){
 setInterval(changeImage, delayInSeconds * 50);
 //} 
//else 
//{ 
//change.value ="False"; 
//} 
})();

html

  presentActionSheet() {
    let actionSheet = this.actionSheetCtrl.create({
      title: 'Select Option',
      buttons: [
        {
          text: 'Open Gallery',
          handler: () => {
            this.takePhoto(0);
          }
        },
        {
          text: 'Take Picture',
          handler: () => {
            this.takePhoto(1);
          }
        },
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    });
    actionSheet.present();
  }

  takePhoto(sourceType: number) {
    const options: CameraOptions = {
      quality: 25,
      destinationType: this.camera.DestinationType.DATA_URL,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true,
      sourceType: sourceType,
    }
    this.camera.getPicture(options).then((imageData) => {
      this.base64Image = 'data:image/jpeg;base64,' + imageData;
    }, (err) => {
      // Handle error
    });
  }

Answer 2

我所做的就是将它们循环到一个数组中并添加for循环

将其推入阵列后，我无法预览相机拍摄的照片吗？

2 个答案: