Question

我试图在文件的字符串路径上为html设置src <img>。

该路径是从cordova.file.dataDirectory Ionic2 Typescript上的... import {Camera} from "ionic-native"; ... import {API} from "../../services/api"; import {ImageAdquistionService} from "../../services/imageAdquisition.service"; ... import {Network,File} from 'ionic-native'; declare let cordova: any; @Component({ selector: 'page-profile', templateUrl: 'profile.html' }) export class ProfilePage implements OnInit{ connected:boolean = false; imagePath: string = "./assets/img/pio.jpg"; userInfo: User = new User(); constructor( private api:API, private imageAdquistionService: ImageAdquistionService, ){ //seleted tab by default this.tabs="info"; this.connected = Network.type !== "none"; } ngOnInit(): void { this.localStorageService.getUserInfo().then(user => { this.userInfo = user; if (this.userInfo.imagenPerfil !== "defAlert") { File.checkFile(cordova.file.dataDirectory,this.userInfo.profileImage).then(result => { console.log("exist") this.imagePath = cordova.file.dataDirectory + this.userInfo.profileImage; }) .catch(error => { console.log("not exist " + JSON.stringify(error)) }) } }); } presentImageOptions(){ let actionSheet = this.actionSheetCtrl.create({ title: 'Select an option', buttons: [ { icon: 'camera', text: 'photo', handler: () => { let navTransition = actionSheet.dismiss(); navTransition.then(() => { this.imageAdquistionService.getANewImage(Camera.PictureSourceType.CAMERA).then(imageData => { if(imageData.success){ this.uploadImage(imageData.fileName, imageData.filePath); } else{this.presentToast(imageData.message)} }) }); return false; } }, { icon: 'image', text: 'Gallery', handler: () => { let navTransition = actionSheet.dismiss(); navTransition.then(() => { this.imageAdquistionService.getANewImage(Camera.PictureSourceType.PHOTOLIBRARY).then(imageData => { if(imageData.success){ this.uploadImage(imageData.fileName, imageData.filePath); } else{this.presentToast(imageData.message)} }); }); return false; } }, { text: 'Close', role: 'cancel', handler: () => { console.log('Cancel clicked'); } } ] }); actionSheet.present(); } uploadImage(fileName: string, filePath: string){ this.presentLoadingCustom(); this.localStorageService.getAccessToken().then(token => { this.api.uploadFile(fileName,filePath).then(result =>{ this.loading.dismissAll(); console.log("uploaded OK); this.userInfo.profileImage = fileName; this.imagePath = filePath; this.api.updateUserPreferences(this.userInfo,token).then(result =>{ if(result.success) { console.log("updated ok"); this.presentToast("image updated succesfully"); } }); }) .catch(error => { this.presentToast(error.message) }) }) } } cordova插件获取的，如下所示：

编辑显示我的代码：

这是profile.ts代码的相关部分

import { Injectable } from '@angular/core';
import {LocalStorageService} from "./localStorage.service";
import {Platform} from "ionic-angular";
import {Camera, File, FilePath} from "ionic-native";
import {API} from "./api";


declare let cordova: any;

@Injectable()
export class ImageAdquistionService {


  constructor(private storage: LocalStorageService,
              public platform: Platform,
              private api:API) {
  }


  getANewImage(src):Promise<any>{
    let options = {
      quality: 60,
      sourceType: src,
      saveToPhotoAlbum: false,
      correctOrientation: true
    };


    return Camera.getPicture(options).then((imageData) => {

      // Special handling for Android library
      if (this.platform.is('android') && src === Camera.PictureSourceType.PHOTOLIBRARY) {


        return FilePath.resolveNativePath(imageData)
          .then(filePath => {

              let correctPath = filePath.substr(0, filePath.lastIndexOf('/') + 1);
              let currentName = imageData.substring(imageData.lastIndexOf('/') + 1, imageData.lastIndexOf('?'));

                return this.storage.getUserInfo().then(user => {

                    return this.copyFileToLocalDir(correctPath, currentName, this.createFileName(user._id)).then(copyResult => copyResult);


            });

            }, (error) => {
              // Handle error
              return {success: false, message: error.message};
            }
          );
      } else {

        let currentName = imageData.substr(imageData.lastIndexOf('/') + 1);
        let correctPath = imageData.substr(0, imageData.lastIndexOf('/') + 1);

        return this.storage.getUserInfo().then(user => {

            return this.copyFileToLocalDir(correctPath, currentName, this.createFileName(user._id)).then(copyResult => copyResult);

        });
      }
    }, (error) => {
        // Handle error
        return {success: false, message: error.message};
      }
    )
  }
  // Create a new name for the image
  createFileName(id:string) {
    let d = new Date(),
      n = d.getTime(),
      newFileName =  n + ".jpg";

      newFileName = id + "_" + newFileName;
      return newFileName;


  }

// Copy the image to a local folder
  copyFileToLocalDir(namePath, currentName, newFileName):Promise<any> {

    return File.copyFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(success => {

      console.log("response of copy " + JSON.stringify(success));
      return {success: true, fileName: newFileName, filePath: this.pathForImage(newFileName)};

    }, error => {
      this.api.logIonicView("Error while storing file " + error.message);

      return {success: false, message: error.message};
    });
  }

  // Always get the accurate path to the apps folder
  public pathForImage(img) {
    if (img === null) {
      return '';
    } else {
      return cordova.file.dataDirectory + img;
    }
  }

}

这是imageAdquisitionService的相关代码

uploadFile(name:string, path:string):Promise<any>{

    let options = {
      fileKey: "file",
      fileName: name,
      chunkedMode: false,
      mimeType: "multipart/form-data",
      params : {'fileName': name}
    };

    let fileTransfer = new Transfer();

    // Use the FileTransfer to upload the image

    return fileTransfer.upload(path, this.urlBase + "upload", options)
      .then(data => {
        console.log("message on filetransfer "+ JSON.stringify(data.response));

        data})
      .catch(this.handleError);

  }

这是api服务的相关代码

<ion-item no-lines class="item-bar-profile">
      <ion-avatar>
        <img class="centered" src="imagePath" (click)="presentOptions();">
      </ion-avatar>
</ion-item>

这是html代码的相关代码

<select name="employee_ID" id="employee_ID" onchange="$('#IncomeTaxDeduction').val($('#employee_ID').find(':selected').data('incomtax'));"> 
             <option value="" disabled selected style="display:none;">Select</option>          
          <?php foreach ($employee_data as $emp_opt_value): ?>
             <option  value="<?php echo $emp_opt_value['ID']; ?>" data-incomtax= "<?php echo $emp_opt_value['IncomeTaxPercent']; ?>" onclick="deductions(this)" > <?php echo $emp_opt_value['ID']; ?></option>
          <?php endforeach; ?>
</select>

这是一个示例，默认的图像路径是硬编码的：

this.imagepath =＆＃34; ./ assets / img / pio.jpg＆＃34;

这是以编程方式将路径更改为

的示例

this.imagepath = file：///data/user/0/com.ionicframework.myionicproject494629/files/58db7e92be26f32d4c8c01d2_1491989021049.jpg

感谢

Answer 1

我有同样的问题。我意识到虽然我是在Android设备上运行，但我是在离线运行它，它不能与cordova插件一起使用。因此，我不必执行ionic cordova run android -l -c命令，而是执行命令ionic cordova run android。

Answer 2

这是错误的[src]="this.imagepath"。无需在此使用this。

您可以尝试如下所示。

<强> file.html

[src]="imagepath"

Answer 3

您不需要在private decimal? xposition; public decimal? XPosition { get { return this.xposition; } set { if (value != null) { this.xposition = Math.Round(value.Value, 4); } else { this.xposition = value; } } }内使用this。

我认为

[src]="this.imagepath"

或

[src]="imagepath"

会工作得很好。

注意：如果src={{imagepath}}是有效路径，则此方法有效。

从dataDirectory文件路径设置为img的src

3 个答案: