Conditional Image Src Binding in angular 2

Question

How to write the ternany condition for <img> src in Angular 2.

Below is the code I tried but this is not working

<img class="lib-img" [src]="item.pictureUrl!= null ? item.pictureUrl : ~/images/logo.png" height="500" width="500" alt="default image">

Answer 1

[src]="item.pictureUrl ? item.pictureUrl : 'assets/img/logo.png'"

Maybe better way is to keep your images in assets folder: assets/img/logo.png

Answer 2

<img [src]="item.pictureUrl!= null ? 'link/to/image1.png' : 
'link/to/image2.png'"> 

This will do the trick

For more binding information follow this link

https://angular.io/guide/template-syntax#html-attribute-vs-dom-property

Answer 3

For those looking to conditionally provide the src attribute to the <img> element:

Use Attribute Binding:

<img [attr.src]="item.pictureUrl" />

If the expression item.pictureUrl evaluates to null, the src attribute will be removed from the <img> element

Answer 4

If you want to use variable in image #svg to get source svg.getAttribute('src'), you need implement method to get image in ts file instead of if else in html file.

I shared for whom concerned.

<div *ngFor="let widget of svgFiles" class="listItem">
    <a draggable="true" class="nav-link" (dragstart)="onDrag($event, 14, svg.getAttribute('src'))">
        <img [src]="getImage(widget)" #svg />                           
    </a>
    <p>{{widget.Name}}</p>
</div>

TS file

getImage(widget) {
        if (this.isRootSearch) {
            return `./assets/svg${widget}`;
        } else {
            return `./assets/svg/${this.selectedSVGFolder}/${widget}`;
        }
    }

Answer 5

[src]="item.pictureUrl!= null ? item.pictureUrl : myImgUrl"

then in your .ts

export class App{
   myImgUrl:string='~/images/logo.png';
}

Answer 6

.html

[src]="validateURL(item.pictureUrl)"

.ts

validateURL(url) {
    let valid = /^(https?|s?ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(url);
    if (valid)
      return url;
    else
      return '';// or "link/to/image1.png"
  }