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!= null ? item.pictureUrl : myImgUrl"

然后在你的的 .TS

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

Answer 2

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

也许更好的方法是将您的图片保存在资源文件夹中： assets / img / logo.png

Answer 3

如果要使用图像#svg中的变量来获取源svg.getAttribute('src')，则需要实现方法来在ts文件中获取图像，而不是在html文件中。

我为关心的人分享了

<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文件

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

Answer 4

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

这样就可以了解

有关更多绑定信息，请点击此链接

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

Answer 5

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

Answer 6

这对我有用：

<img [src]="imageSrc || 'images/default.png'" />

imageSrc是我的JS类中的变量。如果imageSrc为null或未定义，它将使用default.png。

Answer 7

对于希望有条件地向src元素提供<img>属性的用户：

使用Attribute Binding：

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

如果表达式item.pictureUrl计算为空，则src属性将从<img>元素中删除

Conditional Image Src Binding in angular 2

7 个答案: