Problem with Showing dynamically an image in Angular

Question

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>

(...)

It looks like you're mixing up AngularJS with angular here. *ngFor is a special directive in angular (2.x - 13.x), where as ng-init and ng-src are directives used in AngularJS (1.x). While it sounds similar, they are very different frameworks in its implementations and do not share any code-base. — Philipp Meissner
– Philipp Meissner, Commented Dec 18, 2021 at 12:14
Oh alright. And do you know a fix for this issue? How am I supposed to link them? — Brndsn
– Brndsn, Commented Dec 18, 2021 at 12:16

Nibia · Accepted Answer · 2021-12-18 13:00:29Z

1

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

edited Dec 18, 2021 at 13:00

answered Dec 18, 2021 at 12:50

Nibia

3241 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Problem with Showing dynamically an image in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related