Question

我正在尝试将模板中的图像url（本地）放入我的ts文件中。图像从json文件动态加载。因此，当用户点击特定图像时，我需要获取图像路径，以便我可以对其进行base64编码。我在模板中成功显示图像。这就是如何根据用户点击让我回到我的ts的路径，这会给我一个问题。

我的代码如下

HTML：

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-card *ngFor="let i of festivalData" (click)="twitterShare(i)">
    <img src={{i.festivalImage}}>
    <ion-card-content>
      <ion-card-title>
        {{i.festivalName}}
      </ion-card-title>
      <p>
        {{i.festivalDescription}}
      </p>
    </ion-card-content>
  </ion-card>

</ion-content>

TS：

  ionViewWillEnter() {

      this.http.get('assets/data.json').subscribe(data => {
        this.festivalData = data;
      });

  } 

  twitterShare(index){
    this.socialSharing.shareViaTwitter("message", "");
  }

如果它是一个普通的输入框，我知道我可以使用[（ngModel）]，但它似乎不起作用

由于

Answer 1

更新：

twitterShare(index){
    this.socialSharing.shareViaTwitter("message", "");
    console.log(index.festivalImage);
  }

index.festivalImage将包含点击图片的路径。

您可以按照从assests加载json的相似方式加载它。

./assets/myImage.png

这是制作base64本地文件流的超级黑客。

var xhr = new XMLHttpRequest();       
    xhr.open("GET", "/path/to/local/image/file", true); 
    xhr.responseType = "blob";
    xhr.onload = function (e) {
            console.log(this.response);
            var reader = new FileReader();
            reader.onload = function(event) {
               var res = event.target.result;
               console.log(res)
            }
            var file = this.response;
            reader.readAsDataURL(file)
    };
    xhr.send()

这将有base64字符串....

reader.onload = function(event) {
                   var res = event.target.result;
                   console.log(res)
                }

Ionic 3从用户点击

1 个答案: