gpt4 book ai didi

Angular2动态img src

转载 作者:太空狗 更新时间:2023-10-29 17:07:14 27 4
gpt4 key购买 nike

我有以下代码:

<a routerLink="/dashboard" routerLinkActive="active" #rla="routerLinkActive">
<img src="/assets/navigation/dashboard-icon-active.svg" />
<template [ngIf]="!isSmallSidebar">
Dashboard
</template>
</a>

运行我的应用程序,我看到图像正确显示。但是,如果当前路线处于事件状态,我希望图像发生变化。所以我做了:

<a routerLink="/dashboard" routerLinkActive="active" #rla="routerLinkActive">
<!-- <img
id="re-nav-dashboard-img"
src={{ rla.isActive ? './assets/navigation/dashboard-icon-active.svg' : './assets/navigation/dashboard-icon.svg' }} /> -->
<template [ngIf]="!isSmallSidebar">
Dashboard
</template>
</a>

另一方面,这会导致: enter image description here

我做错了什么或者这是一个错误?

最佳答案

您应该以不同的方式使用 Angular 2 绑定(bind)。

你的 <img>标签应该是:

<img id="re-nav-dashboard-img" [src]="rla.isActive ? './assets/navigation/dashboard-icon-active.svg' : './assets/navigation/dashboard-icon.svg'" />

注意 src 周围的方括号属性,以及引号之间的模板表达式。

一些关于属性绑定(bind)的阅读:https://angular.io/docs/ts/latest/guide/template-syntax.html#!#property-binding

关于Angular2动态img src,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40765027/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com