Angular 4 Img Src Is Not Found

Img src ternary operator not displaying image

Try just [src], not [attr.src].

Any way, due you don't get the image from your angular proyect (from src/asstes or similar), I'm not completly sure if you have to "sanitize" this url's before.

Try and comment.

Angular 8 Display image src stored as ng model in variable

The solution to your question is to change html like (using data binding):

<div class="col-6 " style="margin-top: 35px;">
  <div class="row">
    <div class="col-6">
      <img [src]="displayedImage" alt="">
    </div>
  </div>
</div>

And fix the typo from:

this.displayedImage = 'assets/cardsModels/Anniversaire.pnf'

to:

this.displayedImage = 'assets/cardsModels/Anniversaire.png'

how to bind img src in angular 6 with TypeScript 4.1.2

I don't think you need the require call. Try to bind the path directly

Controller

export class AppComponent {
  title = 'angular-ui';
  imagesrc = '../assets/images/myimage.png';
}

Template

<img [src]="imagesrc" height="26"/>

Angular, image not found (GET 404)

@Parth Ghiya commented the answer to my question. I had to put the image to the /src/assets folder. Angular is now able to find the image.

HTML image not displaying even though the path in the img tag is correct

Try putting the image file in assest folder and use this path,

<img src="assets/Uploads/1640665063123--hc-Freeport.jpg" alt="Test">

Angular img src console error

This is what you are looking for: https://docs.angularjs.org/api/ng/directive/ngSrc
It's because browser tries to fetch the image withsrc you provided. If you use ng-src, angular will take care of waiting until the expression is compiled, and then append src to the <img> element.

---

Related Topics