Question

我有这个图片：

<div class="image-index-container">
                    <div>
                        <img class='index-pics' src="images/yourbag.png" alt="">
                        <p class="activeIndex">Your Bag</p>
                    </div>
                    <hr>
                    <div style="width: 13%">
                        <img class='index-pics' src="images/delivery-gray.png" alt="">
                        <p>Delivery Details</p>
                    </div>
</div>

当我点击一个按钮时，我想将src属性从images / yourbag更改为images / yourbag-grey，将img与src图像/ delivery-grey更改为images / delivery。

除了从第一个文本中删除类activeIndex并将其添加到第二个文本而不使用JQuery

Answer 1

使用此[src]="imageUrl"

这样做

import {Component} from '@angular/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
    <img class='index-pics' [src]="imgsrc" alt="">
    </div>
    <button type="button" (click)="btnClick()">change</button>
  `,
  directives: []
})
export class App {
  imgsrc="http://az866755.vo.msecnd.net/product/1468402190267-product.jpeg"

  btnClick()
  {
   this.imgsrc="http://az866755.vo.msecnd.net/product/1454067764999-product.jpeg" 
  }

  constructor() { }
}

Answer 2

使用id，Angular将更新路径。例如

src="{{path}}"

另一个例子

<button (onclick)="path=newpath"><button>

使用角度2 WITHOUT JQUERY更改src属性

2 个答案: