Ionic 3从用户点击的模板获取图像路径

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将包含点击图像的路径。

---

您可以像从资源加载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)
                }