离子 2 /3 ; Onclick 时更改图像 src 标签

Posted 2023-03-05

【中文标题】离子 2 /3 ; Onclick 时更改图像 src 标签

【英文标题】：ionic 2 /3 ; change image src tag when Onclick

【发布时间】：2018-03-17 08:43:18

【问题描述】：

我有一个具有 100% 宽度和 100% 高度的图像的 ionic 页面，我想在单击它时更改图像源。

这是html源代码：

<ion-content>
    <ion-img class="map" src="img/map.jpg" (click)="changeView()"></ion-img>
    <ion-icon class="icon-bonfire" name="ios-bonfire"></ion-icon>
    <ion-icon class="icon-heart" name="md-heart"></ion-icon>
    <ion-icon class="icon-nuclear" name="md-nuclear"></ion-icon>
    <ion-fab top right>
        <button ion-fab color="whitecolor"><ion-icon class="calandaricon" name="md-calendar"></ion-icon></button>
    </ion-fab>
    <ion-fab top left>
        <ion-searchbar> </ion-searchbar>
    </ion-fab>
    <ion-fab bottom right class="fablocate">
        <button ion-fab color="whitecolor"><ion-icon class="locateicon" name="md-locate"></ion-icon></button>
    </ion-fab>
    <ion-fab (click)="ListParrots();" bottom left class="linklist">
        <ion-img class="parrot-list-link" src="img/citydirty.jpg"></ion-img>
    </ion-fab>
</ion-content>

ts源码如下：

import  Component  from '@angular/core';
import  IonicPage, NavController, NavParams  from 'ionic-angular';
import ParrotListPage  from '../parrot-list/parrot-list';

/**
 * Generated class for the MapPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component(
  selector: 'page-map',
  templateUrl: 'map.html',
)
export class MapPage 

   images: String[] = Array("img//map.jpg", "img/map1.jpg");

  constructor(public navCtrl: NavController, public navParams: NavParams) 
  

  changeView()

  

  ionViewDidLoad() 
    console.log('ionViewDidLoad MapPage');
  

  ListParrots()
    this.navCtrl.push(ParrotListPage);
  

有人可以帮助完成所有功能吗？谢谢 ！

【参考方案1】：

更改您的模板：

<ion-img class="map" [src]="picToView" (click)="changeView()"></ion-img>

并在类中声明一个变量：

picToView:string="img/map.jpg";  // always instatiate with a valid value

和更改视图：

  changeView()
          this.picToView=.....
  

问候

汤姆