角度 2 中的条件图像 Src 绑定答案

【问题标题】：Conditional Image Src Binding in angular 2角度 2 中的条件图像 Src 绑定
【发布时间】：2022-01-04 06:01:42
【问题描述】：

如何在 Angular 2 中为 <img> src 编写三元条件。

下面是我尝试过的代码，但这不起作用

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

【问题讨论】：

标签： angular

【解决方案1】：

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

然后在你的 .ts

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

【讨论】：

我，可以看到图片位置但是图片没有加载。在src中有图片位置。
在 html 中的 src= '~/images/logo.png'。但是图片没有加载
plnkr.co/edit/Dnj8eKDRwShmIb4HQUT4?p=preview 这可以根据您的要求正常工作。只需注释第一行并取消注释第二行，您就会得到结果。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

这样就可以了

【讨论】：

正是我需要的，谢谢！

【解决方案4】：

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

我为关心的人分享。

<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}`;
        }
    }

【讨论】：

谢谢。它正在工作。

【解决方案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"
  }

【讨论】：

【解决方案6】：

这对我有用：

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

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

【讨论】：

【解决方案7】：

对于那些希望有条件地为 <img> 元素提供 src 属性的人：

使用Attribute Binding:

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

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

【讨论】：

【解决方案8】：

Nullish coalescing operator (??) 对我有帮助：

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

【讨论】：