CODEWITHSUNDEEP
angularlistimageng-init
Brndsn
Brndsn

Reputation: 21

Problem with Showing dynamically an image in Angular

So I have a list of doctors and I want to display for each doctor in the list the corresponding image. The doctors have an ID so I tried to make the path for the image on ng-init but it still does not work. Can someone help me out? Here's the code.My images are stored in the assets/img folder and the corresponding image for every doctor matches the id of the doctor (Example: Doctor 1 with the id 1 has the image "1.jpg" etc. Also, is there any easier way to do this? Thank you!

<li *ngFor="let doctor of doctors">
      <div class="row">
        <div class="col-4">
          <div ng-init="ImgPath ='assets/img/' + doctor.doctorId +'.jpg"></div>
          <img ng-src="{{ImgPath}" alt="" />
        </div>

(...)

Upvotes: 1

Views: 1499

Answers (1)

Nibia
Nibia

Reputation: 324

Supereasy! You can use only this:

<img src="assets/img/{{doctor.doctorId}}.jpg"/>

or you can bind it on .ts file

html:

<img [src]="urlImage(doctor)"/>

ts:

urlImage(doctor) {
  return `assets/img/${doctor.doctorId}.jpg`;
}

ng-init and ng-src are directives of AngularJS! Don't use it in Angular >2

Upvotes: 1

Related Questions