如何更改 angular2 中的 img src？

Posted 2023-02-22

【中文标题】如何更改 angular2 中的 img src？

【英文标题】：How to change img src in angular2?

【发布时间】：2017-01-17 10:04:12

【问题描述】：

Angular 2: Get reference to a directive used in a component

我想在悬停时更改 img src。参考链接：--

【问题讨论】：

***.com/a/37688325/4102561

Angular Change image src depending on class的可能重复

此页面上的解决方案提供了一个通过鼠标事件进行控制的示例，而不是类依赖

【参考方案1】：

您可以在宿主元素上使用mouseenter和mouseout，如下图，

查看工作演示：https://plnkr.co/edit/GfgZ46?p=preview

    //our root app component
import Component, Directive, Output, EventEmitter, Input, SimpleChange from 'angular2/core'

@Component(
  selector: 'my-app',
  host: 
    '(mouseenter)':'MouseEnter()'
    '(mouseout)':'MouseOut()'
   ,
  template: `
    <img [src]="source"/>
    `
)
export class App 
  source='images/angular.png';

  MouseEnter()
    console.log('Hovering');
    this.source = 'images/car.png';  
  

  MouseOut()
    this.source='images/angular.png';
  

【讨论】：

我的 html:-- 这是在悬停时更改图像源的正确方法吗？

什么是鼠标悬停和鼠标悬停？

我的 Html;-- Component.ts;-- public source='assets/img/key_inactive.png'; MouseEnter() console.log('悬停'); this.source = 'assets/img/key_active.png'; MouseOut() console.log('mouseout'); this.source='assets/img/key_inactive.png'; 但源不会绑定，图像也不会显示。

在 HTML 中，我给出一个图像 [src]="source" 并在 component.ts 中定义源，就像 public source="assets/img/key_inactive.png";但是当我要显示我的图像页面时，它显示 404 not found 错误。我该如何解决这个问题。

您使用的是哪个 Angular2 版本？