Подтвердить что ты не робот

Связывание условного изображения Src в angular 2

Как записать условие ternany для <img> src в Angular 2.

Ниже приведен код, который я пробовал, но это не работает.

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

Ответ 1

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

тогда в твоем .ts

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

Ответ 2

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

Возможно, лучший способ сохранить ваши изображения в папке с активами: assets/img/logo.png

Ответ 3

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

Это сделает трюк

Для получения дополнительной информации привязки следуйте этой ссылке

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

Ответ 4

.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"
  }