如何使用 TypeScript 4.1.2 在 angular 6 中绑定 img src

Question

我正在使用 Angular6 和 typeScript4.1.2 并尝试从 app.component.ts 加载图像并将其绑定到 app.component.html 但图像没有显示。奇怪的是，当我试图直接在 app.component.html 中加载它时，图像是可见的。请帮助我了解我在 app.component.ts

中缺少的内容

app.component.ts :

declare function require(path:string):string;
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  title = 'angular-ui';
  imagesrc = require('../assets/images/myimage.png');
}

app.component.html :

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">        
        <img src={{imagesrc}} height="26"/>
        <!-- <img src="../assets/images/myimage.png" height="26"/> -->
      </a>
      Test
    </div>
  </div>
</nav>

我已经尝试了几乎所有的组合来访问 app.component.ts 中的 myimage.png 但其中 none 有效

imagesrc = require('../assets/images/myimage.png');
imagesrc = require('/assets/images/myimage.png');
imagesrc = require('assets/images/myimage.png');

我也尝试过使用自动完成功能，但是 Visual studio 代码在 ../assets/images/

之后没有显示任何建议

资产路径已经设置在Angular.json

"assets": [
          "src/favicon.ico",
          "src/assets"              
],

Answer 1

这总是有效的

<img [src]="imagesrc" height="26"/>

Answer 2

我认为您不需要 require 电话。尝试直接绑定路径

控制器

export class AppComponent {
  title = 'angular-ui';
  imagesrc = '../assets/images/myimage.png';
}

模板

<img [src]="imagesrc" height="26"/>

如何使用 TypeScript 4.1.2 在 angular 6 中绑定 img src

how to bind img src in angular 6 with TypeScript 4.1.2

angular

typescript

angular6

typescript4.0