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">
[src]="item.pictureUrl!= null ? item.pictureUrl : myImgUrl"
then in your .ts
export class App{
myImgUrl:string='~/images/logo.png';
}
[src]="item.pictureUrl ? item.pictureUrl : 'assets/img/logo.png'"
Maybe better way is to keep your images in assets folder: assets/img/logo.png
<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
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
width and height, and this worked fine for me.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}`;
}
}
.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"
}
This works for me:
<img [src]="imageSrc || 'images/default.png'" />
imageSrc is a variable in my JS class. If imageSrc is null or undefined, it will use default.png.
Nullish coalescing operator (??) was helpful for me:
[src]="item.pictureUrl ?? 'assets/img/logo.png'"
